<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta property="qc:admins" content="465267610762567726375" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />  
	<title>CSS3 教程 | 菜鸟教程</title>

  <link rel='dns-prefetch' href='//s.w.org'>
<link rel="canonical" href="http://www.runoob.com/css3/css3-tutorial.html" />
<meta name="keywords" content="CSS3 教程,css3">
<meta name="description" content="CSS3 教程  CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 本教程向您讲解 CSS3 中的新特性。 开始学习 CSS3!    CSS3 实例  div { &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;transform:rotate(30deg); } 尝试一下 »  点击 &#039;尝试一下&#039; 按钮查看在线实例。   CSS3 参考手册 在菜鸟教程中，我..">
		
	<link rel="shortcut icon" href="http://www.runoob.com/favicon.ico" mce_href="http://www.runoob.com/favicon.ico" type="image/x-icon" >
	<link rel="stylesheet" href="http://www.runoob.com/wp-content/themes/runoob/style.css?v=1.02" type="text/css" media="all" />	
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/fontawesome/4.2.0/css/font-awesome.min.css" media="all" />	
  <script src="http://cdn.static.runoob.com/libs/jquery/1.8.1/jquery.min.js"></script>
  <!--[if lt IE 9]>
     <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
  <link rel="apple-touch-icon" href="http://static.runoob.com/images/icon/mobile-icon.png"/>
  <meta name="apple-mobile-web-app-title" content="菜鸟教程">
</head>
<body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link"> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-intro.html" rel="next"> CSS3 简介</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>CSS3 <span class="color_h1">教程</span>
</h1>
<br>CSS 用于控制网页的样式和布局。</p>
<p>CSS3 是最新的 CSS 标准。</p>
<p >本教程向您讲解 CSS3 中的新特性。</p>
<p><b><a href="css3-intro.html">开始学习 CSS3!</a></b></p>


<br><img src="/images/transforms.gif" alt="CSS3 Transforms" width="625" height="124"><br><br><div class="example">
<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example_head">CSS3 实例</h2>
<div class="example_code notranslate">
div<br>
{<br>
&nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(30deg);<br>
}</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_transform_rotate">尝试一下 »</a>
</div>
<p><b>点击 "尝试一下" 按钮查看在线实例。</b></p>


<h2 class="tutheader">CSS3 参考手册</h2>
<p>在菜鸟教程中，我们提供完整的 CSS3 参考手册，包括所有属性和选择器的语法、实例、浏览器支持信息。</p>
<p><a href="/cssref/css-reference.html">CSS 属性参考手册</a></p>
<p><a href="/cssref/css3-browsersupport.html">CSS3 浏览器支持情况</a></p>
<p><a href="/cssref/css-selectors.html">CSS 选择器参考手册</a></p>
<p><a href="/cssref/css-colornames.html">CSS 颜色参考手册</a></p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link"> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-intro.html" rel="next"> CSS3 简介</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-tutorial.html" rel="prev"> CSS3 教程</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-borders.html" rel="next"> CSS3 边框</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>CSS3 <span class="color_h1">简介</span>
</h1>
<hr>
<p class="intro">对CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。</p>
<hr>
<h2>CSS3 
模块</h2>
<p>CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。</p>
<p>一些最重要CSS3模块如下：</p>
<ul>
<li>选择器</li>
<li>盒模型</li>
<li>背景和边框</li>
<li>文字特效</li>
<li>2D/3D转换</li>
<li>动画</li>
<li>多列布局</li>
<li>用户界面</li>
</ul>
<hr>
<h2>CSS3
建议</h2>
<p>W3C的CSS3规范仍在开发。</p>
<p>但是，许多新的CSS3属性已在现代浏览器使用。</p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-tutorial.html" rel="prev"> CSS3 教程</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-borders.html" rel="next"> CSS3 边框</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isplainobject.html" title="jQuery.isPlainObject()   方法">jQuery.isPlainO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isnumeric.html" title="jQuery.isNumeric()  方法">jQuery.isNumeri...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-intro.html" rel="prev"> CSS3 简介</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-backgrounds.html" rel="next"> CSS3 背景</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>CSS3 <span class="color_h1">边框</span>
</h1>
<div>
<h2>CSS3 边框</h2>
<p>用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。</p>
<p>在本章中，您将了解以下的边框属性：</p>
<ul>
<li>border-radius</li>
	<li>box-shadow</li>
	<li>border-image</li>
</ul>
</div>
<hr>
<h2>CSS3 圆角</h2>
<p>在CSS2中添加圆角棘手。我们不得不在每个角落使用不同的图像。</p>
<p>在CSS3中，很容易创建圆角。</p>
<p>在CSS3中border-radius属性被用于创建圆角：</p>
<div id="rounded_borders">这是圆角边框！</div>
<br><div class="example">

<h2 class="example">实例</h2>

<p>在div中添加圆角元素：</p>
<div class="example_code notranslate">
  
    div<br>
	{<br>
	border:2px solid;<br>
	border-radius:25px;<br>
	}
 
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_border-radius">尝试一下 »</a>


</div>
<br><hr>
<h2>CSS3盒阴影</h2>
<p>CSS3中的box-shadow属性被用来添加阴影:</p>
<div id="boxshadow"></div>
<br><div class="example">

<h2 class="example">实例</h2>
<p>在div中添加box-shadow属性</p>
<div class="example_code notranslate">
  
    div<br>
	{<br>
	box-shadow: 10px 10px 5px #888888;<br>
	}
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_box-shadow">尝试一下 »</a>


</div>
<br><hr>
<h2>CSS3边界图片</h2>
<p>有了CSS3的border-image属性，你可以使用图像创建一个边框：
</p>
<div id="border_image">border-image属性允许你指定一个图片作为边框！
用于创建上文边框的原始图像：</div>
<p>在div中使用图片创建边框:</p>
<img src="/images/border.png" alt="Border" height="81" width="81"><br><br><div class="example">

<h2 class="example">实例</h2>
<p>在div中使用图片创建边框</p>
<div class="example_code notranslate">
  
    div<br>
	{<br>
	border-image:url(border.png) 30 30 round;<br>
	-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */<br>
	-o-border-image:url(border.png) 30 30 round; /* Opera */<br>
	}
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_border-image">尝试一下 »</a>


</div>
<br><hr>
<h2>新边框属性</h2>
<table class="reference">
  <tbody><tr>
    <th width="30%" align="left">属性</th>
    <th width="65%" align="left">说明</th>
    <th width="5%" align="left">CSS</th>
  </tr>
  <tr>
    <td><a href="/cssref/css3-pr-border-image.html">border-image</a></td>
    <td>设置所有边框图像的速记属性。</td>
    <td>3</td>
  </tr>
  <tr>
    <td><a href="/cssref/css3-pr-border-radius.html">border-radius</a></td>
    <td>一个用于设置所有四个边框- *-半径属性的速记属性</td>
    <td>3</td>
  </tr>
  <tr>
    <td><a href="/cssref/css3-pr-box-shadow.html">box-shadow</a></td>
    <td>附加一个或多个下拉框的阴影</td>
    <td>3</td>
  </tr>
</tbody></table>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-intro.html" rel="prev"> CSS3 简介</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-backgrounds.html" rel="next"> CSS3 背景</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-gradients.html" rel="prev"> CSS3 渐变</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-images.html" rel="next"> CSS 图片</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<style> 
#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

#rcorners3 {
    border-radius: 25px;
    background: url(/images/paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}
</style>
<h1>CSS3 <span class="color_h1"> 圆角</span></h1>

<hr>

<div style="border:3px solid #8AC007;margin-top:20px;font-size:15px;padding:25px;border-radius:25px;">
<h2>CSS3 圆角</h2>
<p>使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。</p>
</div>
<p><a href="http://www.w3cschool.cc/css-radius" title="CSS3 圆角制作器">CSS3 圆角制作器</a></p>
<hr>

<h2>浏览器支持</h2>
<p>表格中的数字表示支持该属性的第一个浏览器的版本号。 </p>
<p> -webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。</p>
<table class="browserref notranslate">
  <tbody><tr>
    <th style="width:15%;font-size:16px;text-align:left;">属性</th>
    <th style="width:15%;" class="bsIE" title="Internet Explorer"></th>
    <th style="width:17%;" class="bsChrome" title="Chrome"></th>
    <th style="width:18%;" class="bsFirefox" title="Firefox"></th>
    <th style="width:18%;" class="bsSafari" title="Safari"></th>
    <th style="width:17%;" class="bsOpera" title="Opera"></th>                
  </tr>
  <tr>
    <td style="text-align:left;">border-radius</td>
    <td>9.0</td>
    <td>5.0<br>4.0 -webkit-</td>
    <td>4.0<br>3.0 -moz-</td>
    <td>5.0<br>3.1 -webkit-</td>
    <td>10.5</td>
  </tr>
  </tbody></table>
<hr>

<h2>CSS3 border-radius 属性</h2>
<p>使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。</p>
<p>以下为三个实例：</p>
<p>1. 指定背景颜色的元素圆角：</p>
<p id="rcorners1">圆角！</p>
<p>2. 指定边框的元素圆角:</p>
<p id="rcorners2">圆角！</p>
<p>3. 指定背景图片的元素圆角:</p>
<p id="rcorners3">圆角！</p>
<p>代码如下:</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
    <span class="highELE">#rcorners1 </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">border-radius:</span><span class="highVAL"> 25px;</span><br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">background:</span><span class="highVAL"> #8AC007;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">padding:</span><span class="highVAL"> 20px;</span> <br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">width:</span><span class="highVAL"> 200px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">height:</span><span class="highVAL"> 150px;</span> <br>}<br><br><span class="highELE">#rcorners2 </span>{<br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">border-radius:</span><span class="highVAL"> 25px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">border:</span><span class="highVAL"> 2px solid #8AC007;</span><br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">padding:</span><span class="highVAL"> 20px;</span> <br>&nbsp;&nbsp;&nbsp; <span class="highATT">width:</span><span class="highVAL"> 200px;</span><br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">height:</span><span class="highVAL"> 150px;</span> <br>}<br><br><span class="highELE">#rcorners3 </span>{<br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">border-radius:</span><span class="highVAL"> 25px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">background:</span><span class="highVAL"> url(paper.gif);</span><br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">background-position:</span><span class="highVAL"> left top;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">background-repeat:</span><span class="highVAL"> 
   repeat;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">padding:</span><span class="highVAL"> 20px;</span> <br>&nbsp;&nbsp;&nbsp; <span class="highATT">width:</span><span class="highVAL"> 
   200px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">height:</span><span class="highVAL"> 150px;</span> <br>} </div>
<br>
<a target="_blank" class="tryitbtn" href="/try/tryit.php?filename=trycss3_border-radius1">尝试一下 »</a>
</div>
<hr>

<h2>CSS3 border-radius - 指定每个圆角</h2>
<p>如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。</p>
<p>但是，如果你要在四个角上一一指定，可以使用以下规则：</p>
<ul>
   <li><strong>四个值:</strong> 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。</li>
   <li><strong>三个值:</strong> 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角</li>
   <li><strong>两个值:</strong> 第一个值为左上角与右下角，第二个值为右上角与左下角</li>
   <li><strong>一个值：</strong> 四个圆角值相同</li>
</ul>
<p>以下为三个实例:</p>
<p>1. 四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>

<p>2. 三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>

<p>3. 两个值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>

<p>以下为源代码:</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
    <span class="highELE">#rcorners4 </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">border-radius:</span><span class="highVAL"> 15px 50px 30px 5px;</span><br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">background:</span><span class="highVAL"> #8AC007;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">padding:</span><span class="highVAL"> 20px;</span> <br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">width:</span><span class="highVAL"> 200px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">height:</span><span class="highVAL"> 150px;</span> <br>}<br><br><span class="highELE">#rcorners5 </span>{<br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">border-radius:</span><span class="highVAL"> 15px 50px 30px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">background:</span><span class="highVAL"> #8AC007;</span><br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">padding:</span><span class="highVAL"> 20px;</span> <br>&nbsp;&nbsp;&nbsp; <span class="highATT">width:</span><span class="highVAL"> 200px;</span><br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">height:</span><span class="highVAL"> 150px;</span> <br>}<br><br><span class="highELE">#rcorners6 </span>{<br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">border-radius:</span><span class="highVAL"> 15px 50px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">background:</span><span class="highVAL"> #8AC007;</span><br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">padding:</span><span class="highVAL"> 20px;</span> <br>&nbsp;&nbsp;&nbsp; <span class="highATT">width:</span><span class="highVAL"> 200px;</span><br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">height:</span><span class="highVAL"> 150px;</span> <br>} </div>
<br>
<a target="_blank" class="tryitbtn" href="/try/tryit.php?filename=trycss3_border-radius2">尝试一下 »</a>
</div>

<p>您还可以创建椭圆边角:</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate cssHigh">
    <span class="highELE">#rcorners7 </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">border-radius:</span><span class="highVAL"> 50px/15px;</span><br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">background:</span><span class="highVAL"> #8AC007;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">padding:</span><span class="highVAL"> 20px;</span> <br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">width:</span><span class="highVAL"> 200px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">height:</span><span class="highVAL"> 150px;</span> <br>}<br><br><span class="highELE">#rcorners8 </span>{<br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">border-radius:</span><span class="highVAL"> 15px/50px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">background:</span><span class="highVAL"> #8AC007;</span><br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">padding:</span><span class="highVAL"> 20px;</span> <br>&nbsp;&nbsp;&nbsp; <span class="highATT">width:</span><span class="highVAL"> 200px;</span><br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">height:</span><span class="highVAL"> 150px;</span> <br>}<br><br><span class="highELE">#rcorners9 </span>{<br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">border-radius:</span><span class="highVAL"> 50%;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">background:</span><span class="highVAL"> #8AC007;</span><br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">padding:</span><span class="highVAL"> 20px;</span> <br>&nbsp;&nbsp;&nbsp; <span class="highATT">width:</span><span class="highVAL"> 200px;</span><br>&nbsp;&nbsp;&nbsp; 
   <span class="highATT">height:</span><span class="highVAL"> 150px;</span><br>} </div>
<br>
<a target="_blank" class="tryitbtn" href="/try/tryit.php?filename=trycss3_border-radius3">尝试一下 »</a>
</div>
<hr>

<h2>CSS3 圆角属性</h2>
<table class="reference">
  <tbody><tr>
    <th style="width:30%">属性</th>
    <th>描述</th>
  </tr>
  <tr>
    <td><a href="/cssref/css3-pr-border-radius.html" target="_blank">border-radius</a></td>
    <td>所有四个边角 border-*-*-radius 属性的缩写 </td>
  </tr>
  <tr>
    <td>
   <a href="/cssref/css3-pr-border-top-left-radius.html" target="_blank">border-top-left-radius</a></td>
    <td>定义了左上角的弧度</td>
  </tr>
  <tr>
    <td>
   <a href="/cssref/css3-pr-border-top-right-radius.html" target="_blank">border-top-right-radius</a></td>
    <td>定义了右上角的弧度</td>
  </tr>
  <tr>
    <td>
   <a href="/cssref/css3-pr-border-bottom-right-radius.html" target="_blank">border-bottom-right-radius</a></td>
    <td>定义了右下角的弧度</td>
  </tr>
  <tr>
    <td>
   <a href="/cssref/css3-pr-border-bottom-left-radius.html" target="_blank">border-bottom-left-radius</a></td>
    <td>定义了左下角的弧度</td>
  </tr>
  </tbody></table>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-gradients.html" rel="prev"> CSS3 渐变</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-images.html" rel="next"> CSS 图片</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-borders.html" rel="prev"> CSS3 边框</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-text-effects.html" rel="next"> CSS3 文本效果</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>CSS3 <span class="color_h1">背景</span>
</h1>
<hr>

<h2>CSS3 背景</h2>
<p>CSS3中包含几个新的背景属性，提供更大背景元素控制。</p>
<p>在本章您将了解以下背景属性：</p>
<ul>
<li>background-image</li>
<li>background-size</li>
<li>background-origin</li>
<li>background-clip</li>
</ul>
<p>您还将学习如何使用多重背景图像。</p>


<hr>
<h2>浏览器支持</h2>

<p>表格中的数字表示支持该属性的第一个浏览器版本号。</p>
<p>紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。</p>
<table class="browserref">
  <tbody><tr>
    <th style="width:25%;font-size:16px;text-align:left">属性</th>
    <th style="width:15%" class="bsChrome" title="Chrome"></th>
    <th style="width:15%" class="bsEdge" title="Internet Explorer / Edge"></th>
    <th style="width:15%" class="bsFirefox" title="Firefox"></th>
    <th style="width:15%" class="bsSafari" title="Safari"></th>
    <th style="width:15%" class="bsOpera" title="Opera"></th>                
  </tr>
    <tr>
    <td style="text-align:left">background-image<br>(with multiple backgrounds)</td>
    <td>4.0</td>
    <td>9.0</td>
    <td>3.6</td>
    <td>3.1</td>
    <td>11.5</td>
    </tr>
  <tr>
    <td style="text-align:left">background-size</td>
    <td>4.0<br>1.0&nbsp;-webkit-</td>
    <td>9.0</td>
    <td>4.0<br>3.6&nbsp;-moz-</td>
    <td>4.1<br>3.0&nbsp;-webkit-</td>
    <td>10.5<br>10.0&nbsp;-o-</td>
  </tr>
  <tr>
    <td style="text-align:left">background-origin</td>
    <td>1.0</td>
    <td>9.0</td>
    <td>4.0</td>
    <td>3.0</td>
    <td>10.5</td>
  </tr>
  <tr>
    <td style="text-align:left">background-clip</td>
    <td>4.0</td>
    <td>9.0</td>
    <td>4.0</td>
    <td>3.0</td>
    <td>10.5</td>
  </tr>
</tbody></table>
<hr>
<h2>CSS3 background-image属性</h2>
<div></div>
<p>CSS3中可以通过background-image属性添加背景图片。</p>
<p>不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。</p>
<div class="example"> 
<h2 class="example">实例</h2> 
<div class="example_code"> 
#example1 {<br />
    background-image: url(img_flwr.gif), url(paper.gif);<br />
    background-position: right bottom, left top;<br />
    background-repeat: no-repeat, repeat;<br />
}
</div><br> 
<a target="_blank" href="/try/try.php?filename=trycss3_background_multiple" class="tryitbtn">尝试一下 »</a>

</div>
<br><hr>
<p>可以给不同的图片设置多个不同的属性</p>
<div class="example"> 
<h2 class="example">实例</h2> 
<div class="example_code"> 
#example1 {<br />
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;<br />
}
</div><br> 
<a target="_blank" href="/try/try.php?filename=trycss3_background_multiple2" class="tryitbtn">尝试一下 »</a>
</div>

<br><hr>
<h2>CSS3 background-size 属性</h2>

<p>background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。 </p>
<p>CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。</p>
<p>你指定的大小是相对于父元素的宽度和高度的百分比的大小。</p>

<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例 1</h2>
<p>重置背景图像：</p>
<div class="example_code">
  
    div<br>
    {<br>
    background:url(img_flwr.gif);<br>
    background-size:80px 60px;<br>
    background-repeat:no-repeat;<br>
    }
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_background-size">尝试一下 »</a>


</div>
<br><div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例 2</h2>
<p>伸展背景图像完全填充内容区域：</p>
<div class="example_code">
  
    div<br>
    {<br>
    background:url(img_flwr.gif);<br>
    background-size:100% 100%;<br>
    background-repeat:no-repeat;<br>
    }
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_background-size2">尝试一下 »</a>


</div>
<br><hr>
<h2>CSS3的background-Origin属性</h2>
<p>background-Origin属性指定了背景图像的位置区域。</p>
<p>content-box, padding-box,和 border-box区域内可以放置背景图像。 </p>

<img src="/images/background-origin.gif"><br><br><div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>在 content-box 中定位背景图片：</p>
<div class="example_code">
  
    div<br>
    {<br>
    background:url(img_flwr.gif);<br>
    background-repeat:no-repeat;<br>
    background-size:100% 100%;<br>
    background-origin:content-box;<br>
    }
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_background-origin">尝试一下 »</a>


</div>
<br><hr>
<table>
<tr>
<td><h2>CSS3 多个背景图像</h2></td>
<td rowspan="2">
<div></div>
</td>
</tr>
<tr>
<td>
<p>CSS3 允许你在元素</p>那个添加多个背景图像。</p>
</td>
</tr>
</table>
<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>在 body 元素中设置两个背景图像：</p>
<div class="example_code notranslate">
  
    body<br>
    { <br>
    background-image:url(img_flwr.gif),url(img_tree.gif);<br>
    }
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_background_multiple">尝试一下 »</a>

</div>
<br><hr>
<h2>CSS3 background-clip属性</h2>

<p>CSS3中background-clip背景剪裁属性是从指定位置开始绘制</p>

<div class="example"> 
<h2 class="example">实例</h2> 
<div class="example_code"> 
#example1 {<br />
    border: 10px dotted black;<br />
    padding: 35px;<br />
    background: yellow;<br />
    background-clip: content-box;<br />
}
</div><br> 
<a target="_blank" href="/try/try.php?filename=trycss3_background-clip" class="tryitbtn">尝试一下 »</a>
</div>

<br><hr>
<h2>新的背景属性</h2>
<table class="reference">
<tr>
<th width="28%" align="left">顺序</th>
    <th width="67%" align="left">描述</th>
    <th width="5%" align="left">CSS</th>
  </tr>
<tr>
<td><a href="/cssref/css3-pr-background-clip.html">background-clip</a></td>
    <td>规定背景的绘制区域。</td>
    <td>3</td>
  </tr>
<tr>
<td><a href="/cssref/css3-pr-background-origin.html">background-origin</a></td>
    <td>规定背景图片的定位区域。</td>
    <td>3</td>
  </tr>
<tr>
<td><a href="/cssref/css3-pr-background-size.html">background-size</a></td>
    <td>规定背景图片的尺寸。</td>
    <td>3</td>
  </tr>
</table>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-borders.html" rel="prev"> CSS3 边框</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-text-effects.html" rel="next"> CSS3 文本效果</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-user-interface.html" rel="prev"> CSS3 用户界面</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-border-radius.html" rel="next"> CSS3 圆角</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>CSS3 <span class="color_h1">渐变（Gradients）</span></h1>
<hr>

<img src="/wp-content/uploads/2014/07/gradient_top.png" alt="线性渐变" style="width:822px;height:55px">
<p>CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。</p>
<p>以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。</p>
<p>CSS3 定义了两种类型的渐变（gradients）：</p>
<ul>
<li><strong>线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向</strong></li>
<li><strong>径向渐变（Radial Gradients）- 由它们的中心定义</strong></li>
</ul>
<hr>

<h2>浏览器支持</h2>
<p>表中的数字指定了完全支持该属性的第一个浏览器版本。</p>
<p>后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。</p>
<table class="browserref notranslate">
  <tr>
    <th style="width:25%;font-size:16px;text-align:left;">属性</th>
    <th style="width:12%;" class="bsIE" title="Internet Explorer"></th>
    <th style="width:16%;" class="bsChrome" title="Chrome"></th>
    <th style="width:16%;" class="bsFirefox" title="Firefox"></th>
    <th style="width:16%;" class="bsSafari" title="Safari"></th>
    <th style="width:15%;" class="bsOpera" title="Opera"></th>                
  </tr>
  <tr>
    <td>linear-gradient</td>
    <td>10.0</td>
    <td>26.0<br>10.0 -webkit-</td>
    <td>16.0<br>3.6 -moz-</td>
    <td>6.1<br>5.1 -webkit-</td>
    <td>12.1<br>11.1 -o-</td>
  </tr>
  <tr>
    <td>radial-gradient</td>
    <td>10.0</td>
    <td>26.0<br>10.0 -webkit-</td>
    <td>16.0<br>3.6 -moz-</td>
    <td>6.1<br>5.1 -webkit-</td>
    <td>12.1<br>11.6 -o-</td>
  </tr>
  <tr>
    <td>repeating-linear-gradient</td>
    <td>10.0</td>
    <td>26.0<br>10.0 -webkit-</td>
    <td>16.0<br>3.6 -moz-</td>
    <td>6.1<br>5.1 -webkit-</td>
    <td>12.1<br>11.1 -o-</td>
  </tr>
  <tr>
    <td>repeating-radial-gradient</td>
    <td>10.0</td>
    <td>26.0<br>10.0 -webkit-</td>
    <td>16.0<br>3.6 -moz-</td>
    <td>6.1<br>5.1 -webkit-</td>
    <td>12.1<br>11.6 -o-</td>
  </tr>
</table>
<br>
<hr>

<h2>CSS3 线性渐变</h2>
<p>为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。</p>

<p><strong>线性渐变的实例：</strong></p>
<img src="/wp-content/uploads/2014/07/gradient_linear.png" alt="线性渐变" style="width:200px;height:150px">
<h3>语法</h3>
<div class="code notranslate"><div>
background: linear-gradient(<em>direction</em>, <em>color-stop1</em>, <em>
color-stop2, ...</em>);</div></div>

<p><strong>线性渐变 - 从上到下（默认情况下）</strong></p>
<p>下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

<div class="example">
<h2 class="example">实例</h2>
<p>从上到下的线性渐变：</p>
<div class="example_code notranslate cssHigh">
    #grad {<br>&nbsp; background: -webkit-linear-gradient(red, 
	blue); /* Safari 5.1 - 6.0 */<br>&nbsp; background: -o-linear-gradient(red, blue); /* 
	Opera 11.1 - 12.0 */<br>&nbsp; background: -moz-linear-gradient(red, blue); /* 
	Firefox 3.6 - 15 */<br>&nbsp; background: linear-gradient(red, blue); /* 标准的语法 */<br>} </div>
<br>
<a class="tryitbtn" href="/try/try.php?filename=trycss3_gradient-linear" target="_blank">尝试一下 »</a>
</div>

<p><strong>线性渐变 - 从左到右</strong></p>
<p>下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

<div class="example">
<h2 class="example">实例</h2>
<p>从左到右的线性渐变：</p>
<div class="example_code notranslate cssHigh">
    #grad {<br>&nbsp; background: -webkit-linear-gradient(left, 
	red , blue); /* Safari 5.1 - 6.0 */<br>&nbsp; background: -o-linear-gradient(right, red, 
	blue); /* Opera 11.1 - 12.0 */<br>&nbsp; background: -moz-linear-gradient(right, 
	red, blue); /* Firefox 3.6 - 15 */<br>&nbsp; background: linear-gradient(to 
	right, red , blue); /* 标准的语法 */<br>} </div>
<br>
<a class="tryitbtn" href="/try/try.php?filename=trycss3_gradient-linear_ltr" target="_blank">尝试一下 »</a>
</div>

<p><strong>线性渐变 - 对角</strong></p>
<p>你可以通过指定水平和垂直的起始位置来制作一个对角渐变。</p>
<p>下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

<div class="example">
<h2 class="example">实例</h2>
<p>从左上角到右下角的线性渐变：</p>
<div class="example_code notranslate cssHigh">
    #grad {<br>&nbsp; background: -webkit-linear-gradient(left 
	top, red , blue); /* Safari 5.1 - 6.0 */<br>&nbsp; background: -o-linear-gradient(bottom 
	right, red, blue); /* Opera 11.1 - 12.0 */<br>&nbsp; background: -moz-linear-gradient(bottom 
	right, red, blue); /* Firefox 3.6 - 15 */<br>&nbsp; background: 
	linear-gradient(to bottom right, red , blue); /* 标准的语法 */<br>} </div>
<br>
<a class="tryitbtn" href="/try/try.php?filename=trycss3_gradient-linear_diagonal" target="_blank">尝试一下 »</a>
</div>
<br>
<hr>

<h2>使用角度</h2>
<p>如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。</p>

<h3>语法</h3>
<div class="code notranslate">
<div>
	background: linear-gradient(<em>angle</em>, <em>color-stop1</em>, <em>
	color-stop2</em>);
</div></div>

<p>角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。</p>
<img src="http://www.runoob.com/wp-content/uploads/2014/07/7B0CC41A-86DC-4E1B-8A69-A410E6764B91.jpg" style="width: 50%;">
<p>但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 <strong>90 - x = y</strong> 其中 x 为标准角度，y为非标准角度。</p>
<p>下面的实例演示了如何在线性渐变上使用角度：</p>

<div class="example">
<h2 class="example">实例</h2>
<p>带有指定的角度的线性渐变：</p>
<div class="example_code notranslate cssHigh">
    #grad {<br>&nbsp; background: -webkit-linear-gradient(180deg, 
	red, blue); /* Safari 5.1 - 6.0 */<br>&nbsp; background: -o-linear-gradient(180deg, red, 
	blue); /* Opera 11.1 - 12.0 */<br>&nbsp; background: -moz-linear-gradient(180deg, 
	red, blue); /* Firefox 3.6 - 15 */<br>&nbsp; background: 
	linear-gradient(180deg, red, blue); /* 标准的语法 */<br>
	} </div>
<br>
<a class="tryitbtn" href="/try/try.php?filename=trycss3_gradient-linear_angles" target="_blank">尝试一下 »</a>
</div>
<br>
<hr>

<h2>使用多个颜色结点</h2>
<p>下面的实例演示了如何设置多个颜色结点：</p>
<div class="example">
<h2 class="example">实例</h2>
<p>带有多个颜色结点的从上到下的线性渐变：</p>
<div class="example_code notranslate cssHigh">
    #grad {<br>&nbsp; background: -webkit-linear-gradient(red, 
	green, blue); /* Safari 5.1 - 6.0 */<br>&nbsp; background: -o-linear-gradient(red, green, 
	blue); /* Opera 11.1 - 12.0 */<br>&nbsp; background: -moz-linear-gradient(red, 
	green, blue); /* Firefox 3.6 - 15 */<br>&nbsp; background: 
	linear-gradient(red, green, blue); /* 标准的语法 */<br>} </div>
<br>
<a class="tryitbtn" href="/try/try.php?filename=trycss3_gradient-linear_cs" target="_blank">尝试一下 »</a>
</div>
<p>下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate cssHigh">
    #grad {<br>&nbsp; /* Safari 5.1 - 6.0 */<br>&nbsp; background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);<br>
	&nbsp;
	/* Opera 11.1 - 12.0 */<br>&nbsp; background: 
	-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);<br>&nbsp; /* 
	Firefox 3.6 - 15 */<br>&nbsp; background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);<br>
	&nbsp;
	/* 标准的语法 */<br>&nbsp; background: linear-gradient(to right, 
	red,orange,yellow,green,blue,indigo,violet); <br>} </div>
<br>
<a class="tryitbtn" href="/try/try.php?filename=trycss3_gradient-linear_rainbow" target="_blank">尝试一下 »</a>
</div>
<br>
<hr>

<h2>使用透明度（Transparency）</h2>
<p>CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。</p>
<p>为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。</p>
<p>下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：</p>
<div class="example">
	<h2 class="example">实例</h2>
<p>从左到右的线性渐变，带有透明度：</p>
<div class="example_code notranslate cssHigh">
    #grad {<br>&nbsp; background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 
	5.1 - 6 */<br>&nbsp; background: 
	-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/<br>&nbsp; background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); 
	/* Firefox 3.6 - 15*/<br>&nbsp; background: linear-gradient(to right, rgba(255,0,0,0), 
	rgba(255,0,0,1)); /* 标准的语法 */<br>} </div>
<br>
	<a class="tryitbtn" href="/try/try.php?filename=trycss3_gradient-linear_trans" target="_blank">尝试一下 »</a>
</div>
<br>
<hr>

<h2>重复的线性渐变</h2>
<p>repeating-linear-gradient() 函数用于重复线性渐变：</p>
<div class="example">
	<h2 class="example">实例</h2>
<p>一个重复的线性渐变：</p>
<div class="example_code notranslate cssHigh">
    #grad {<br>&nbsp; /* Safari 5.1 - 6.0 */<br>&nbsp; background: -webkit-repeating-linear-gradient(red, 
	yellow 10%, green 20%);<br>&nbsp; /* Opera 11.1 - 12.0 */<br>&nbsp; background: 
	-o-repeating-linear-gradient(red, yellow 10%, green 20%);<br>&nbsp; /* Firefox 3.6 
	- 15 */<br>&nbsp; background: -moz-repeating-linear-gradient(red, yellow 10%, 
	green 20%);<br>&nbsp; /* 标准的语法 */<br>&nbsp; background: 
	repeating-linear-gradient(red, yellow 10%, green 20%);<br>} </div>
<br>
	<a class="tryitbtn" href="/try/try.php?filename=trycss3_gradient-linear_repeating" target="_blank">尝试一下 »</a>
</div>
<br>
<hr>

<h2>CSS3 径向渐变</h2>
<p>径向渐变由它的中心定义。</p>

<p>为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。</p>

<p><strong>径向渐变的实例：</strong></p>
<img src="/wp-content/uploads/2014/07/gradient_radial.jpg" alt="Radial gradient" style="width:200px;height:150px">
<h3>语法</h3>
<div class="code notranslate"><div>
background: radial-gradient(<em>center, shape size, start-color, ..., last-color</em>);</div></div>

<p><strong>径向渐变 - 颜色结点均匀分布（默认情况下）</strong></p>
<div class="example">
<h2 class="example">实例</h2>
<p>颜色结点均匀分布的径向渐变：</p>
<div class="example_code notranslate cssHigh">
    #grad {<br>&nbsp; background: -webkit-radial-gradient(red, green, blue); /* 
	Safari 5.1 - 6.0 */<br>&nbsp; background: -o-radial-gradient(red, green, blue); /* Opera 
	11.6 - 12.0 */<br>&nbsp; background: -moz-radial-gradient(red, green, blue); /* 
	Firefox 3.6 - 15 */<br>&nbsp; background: radial-gradient(red, green, blue); 
	/* 标准的语法 */<br>} </div>
<br>
<a class="tryitbtn" href="/try/try.php?filename=trycss3_gradient-radial" target="_blank">尝试一下 »</a>
</div>

<p><strong>径向渐变 - 颜色结点不均匀分布</strong></p>
<div class="example">
<h2 class="example">实例</h2>
<p>颜色结点不均匀分布的径向渐变：</p>
<div class="example_code notranslate cssHigh">
    #grad {<br>&nbsp; background: -webkit-radial-gradient(red 5%, green 15%, blue 
	60%); /* 
	Safari 5.1 - 6.0 */<br>&nbsp; background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 
	11.6 - 12.0 */<br>&nbsp; background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* 
	Firefox 3.6 - 15 */<br>&nbsp; background: radial-gradient(red 5%, green 15%, blue 
	60%); 
	/* 标准的语法 */<br>} </div>
<br>
<a class="tryitbtn" href="/try/try.php?filename=trycss3_gradient-radial2" target="_blank">尝试一下 »</a>
</div>
<br>
<hr>

<h2>设置形状</h2>
<p>shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。</p>

<div class="example">
<h2 class="example">实例</h2>
<p>形状为圆形的径向渐变：</p>
<div class="example_code notranslate cssHigh">
    #grad {<br>&nbsp; background: -webkit-radial-gradient(circle, red, yellow, green); /* 
	Safari 5.1 - 6.0 */<br>&nbsp; background: -o-radial-gradient(circle, red, yellow, green); /* Opera 
	11.6 - 12.0 */<br>&nbsp; background: -moz-radial-gradient(circle, red, yellow, 
	green); /* Firefox 3.6 - 15 */<br>&nbsp; background: radial-gradient(circle, red, 
	yellow, green); 
	/* 标准的语法 */<br>
	} </div>
<br>
<a class="tryitbtn" href="/try/try.php?filename=trycss3_gradient-radial_shape" target="_blank">尝试一下 »</a>
</div>
<br>
<hr>

<h2>不同尺寸大小关键字的使用</h2>
<p>size 参数定义了渐变的大小。它可以是以下四个值：</p>
<ul>
	<li><strong>closest-side</strong></li>
	<li><strong>farthest-side</strong></li>
	<li><strong>closest-corner</strong></li>
	<li><strong>farthest-corner</strong></li>
</ul>

<div class="example">
<h2 class="example">实例</h2>
<p>带有不同尺寸大小关键字的径向渐变：</p>
<div class="example_code notranslate cssHigh">
    #grad1 {<br>&nbsp; /* Safari 5.1 - 6.0 */<br>&nbsp; background: -webkit-radial-gradient(60% 
	55%, closest-side,blue,green,yellow,black); <br>&nbsp; /* Opera 11.6 - 12.0 */<br>
	&nbsp;
	background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);<br>
	&nbsp;
	/* Firefox 3.6 - 15 */<br>&nbsp; background: -moz-radial-gradient(60% 55%, 
	closest-side,blue,green,yellow,black);<br>&nbsp; /* 标准的语法 */<br>
	&nbsp;
	background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);<br>}<br>
	<br>#grad2 {<br>
	&nbsp;
	/* Safari 5.1 - 6.0 */<br>&nbsp; background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);<br>
	&nbsp;
	/* Opera 11.6 - 12.0 */ <br>&nbsp; background: -o-radial-gradient(60% 55%, 
	farthest-side,blue,green,yellow,black);<br>&nbsp; /* Firefox 3.6 - 15 */<br>
	&nbsp;
	background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);<br>
	&nbsp;
	/* 标准的语法 */<br>&nbsp; background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);<br>} </div>
<br>
<a class="tryitbtn" href="/try/try.php?filename=trycss3_gradient-radial_size" target="_blank">尝试一下 »</a>
</div>
<br>
<hr>

<h2>重复的径向渐变</h2>
<p>repeating-radial-gradient() 函数用于重复径向渐变：</p>
<div class="example">
	<h2 class="example">实例</h2>
<p>一个重复的径向渐变：</p>
<div class="example_code notranslate cssHigh">
    #grad {<br>&nbsp; /* Safari 5.1 - 6.0 */<br>&nbsp; background: -webkit-repeating-radial-gradient(red, 
	yellow 10%, green 15%);<br>&nbsp; /* Opera 11.6 - 12.0 */<br>&nbsp; background: 
	-o-repeating-radial-gradient(red, yellow 10%, green 15%);<br>&nbsp; /* Firefox 
	3.6 - 15 */<br>&nbsp; background: -moz-repeating-radial-gradient(red, yellow 10%, 
	green 15%);<br>&nbsp; /* 标准的语法 */<br>&nbsp; background: 
	repeating-radial-gradient(red, yellow 10%, green 15%);<br>} </div>
<br>
	<a class="tryitbtn" href="/try/try.php?filename=trycss3_gradient-radial_repeating" target="_blank">尝试一下 »</a>
</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-user-interface.html" rel="prev"> CSS3 用户界面</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-border-radius.html" rel="next"> CSS3 圆角</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isplainobject.html" title="jQuery.isPlainObject()   方法">jQuery.isPlainO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isnumeric.html" title="jQuery.isNumeric()  方法">jQuery.isNumeri...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isfunction.html" title="jQuery.isFunction()  方法">jQuery.isFuncti...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-backgrounds.html" rel="prev"> CSS3 背景</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-fonts.html" rel="next"> CSS3 字体</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			#textshadow
{
text-shadow: 5px 5px 5px #FF0000;
font-size:30px;
}
#wordwrap
{
width:11em; 
border:1px solid #000000;
word-wrap:break-word;
}
#normal
{
width:11em; 
border:1px solid #000000;
word-wrap:normal;
}

<h1>CSS3 <span class="color_h1">文本效果</span>
</h1>
<hr>
<h2>CSS3 文本效果</h2>
<p>CSS3中包含几个新的文本特征。</p>
<p>在本章中您将了解以下文本属性：</p>
<ul>
<li>text-shadow</li>
<li>box-shadow</li>
<li>text-overflow</li>
<li>word-wrap</li>
<li>word-break</li>
</ul>
<hr>
<h2>浏览器支持</h2>
<table class="browserref notranslate">
  <tbody><tr>
    <th style="width:25%;font-size:16px;text-align:left">属性</th>
    <th style="width:15%" class="bsChrome" title="Chrome"></th>
    <th style="width:15%" class="bsEdge" title="Internet Explorer / Edge"></th>
    <th style="width:15%" class="bsFirefox" title="Firefox"></th>
    <th style="width:15%" class="bsSafari" title="Safari"></th>
    <th style="width:15%" class="bsOpera" title="Opera"></th>                
  </tr>
  <tr>
    <td style="text-align:left">text-shadow</td>
    <td>4.0</td>
    <td>10.0</td>
    <td>3.5</td>
    <td>4.0</td>
    <td>9.5</td>
  </tr>
    <tr>
    <td style="text-align:left">box-shadow</td>
    <td>10.0<br>4.0&nbsp;-webkit-</td>
    <td>9.0</td>
    <td>4.0<br>3.5&nbsp;-moz-</td>
    <td>5.1<br>3.1&nbsp;-webkit-</td>
    <td>10.5</td>
    </tr>
  <tr>
    <td style="text-align:left">text-overflow</td>
    <td>4.0</td>
    <td>6.0</td>
    <td>7.0</td>
    <td>3.1</td>
    <td>11.0<br>9.0&nbsp;-o-</td>
  </tr>
  <tr>
    <td style="text-align:left">word-wrap</td>
    <td>23.0</td>
    <td>5.5</td>
    <td>3.5</td>
    <td>6.1</td>
    <td>12.1</td>
  </tr>
  <tr>
    <td style="text-align:left">word-break</td>
    <td>4.0</td>
    <td>5.5</td>
    <td>15.0</td>
    <td>3.1</td>
    <td>15.0</td>
  </tr>
</tbody></table>
<hr>
<h2>CSS3的文本阴影</h2>
<p>CSS3中，text-shadow属性适用于文本阴影。</p>
<p>

<img src="/images/text_shadow_effect.gif" alt="Text shadow effect!"></p>
<p>您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：</p>
<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>给标题添加阴影:</p>
<div class="example_code notranslate">
  
    h1<br>
	{<br>
	text-shadow: 5px 5px 5px #FF0000;<br>
	}
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_text-shadow_tut">尝试一下 »</a>
</div>

<br /><hr />
<h2>CSS3 box-shadow属性</h2>
<div></div>
<p>CSS3中CSS3 box-shadow属性适用于盒子阴影</p>

<div class="example"> 
<h2 class="example">实例</h2> 
<div class="example_code"> 
div {<br />
    box-shadow: 10px 10px;<br />
}
</div><br> 
<a target="_blank" href="/try/try.php?filename=trycss3_box-shadow" class="tryitbtn">尝试一下 »</a>
</div>
</div>
<br /><hr />
<h2>接下来给阴影添加颜色</h2>
<div class="example"> 
<h2 class="example">实例</h2> 
<div class="example_code"> 
div {<br />
    box-shadow: 10px 10px grey;<br />
}
</div><br> 
<a target="_blank" href="/try/try.php?filename=trycss3_box-shadow2" class="tryitbtn">尝试一下 »</a>
</div>
</div>
<br /><hr />

<h2>接下来给阴影添加一个模糊效果</h2>

<div class="example"> 
<h2 class="example">实例</h2> 
<div class="example_code"> 
div {<br />
    box-shadow: 10px 10px 5px grey;<br />
}
</div><br> 
<a target="_blank" href="/try/try.php?filename=trycss3_box-shadow3" class="tryitbtn">尝试一下 »</a>
</div>
</div>
<br /><hr />


<h2>你也可以在：：befor和：：after两个伪元素中添加阴影效果</h2>
 
<div class="example"> 
<h2 class="example">实例</h2> 
<div class="example_code"> 
# boxshadow {<br />
     position: relative;<br />
    b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);<br />
    pa dding: 10px;<br />
    bac kground: white;<br />
} <br />
#boxshadow img {<br />
     width: 100%;<br />
     border: 1px solid #8a4419;<br />
     border-style: inset;<br />
} <br />
#b oxshadow::after {<br />
     content: '';<br />
    position: absolute;<br />
    z-index: -1; /* hide shadow behind image */<br />
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); <br />
    width: 70%; <br />
    left: 15%; /* one half of the remaining 30% */<br />
    height: 100px;<br />
    bottom: 0;<br />
}
</div><br> 
<a target="_blank" href="/try/try.php?filename=trycss3_box-shadow6" class="tryitbtn">尝试一下 »</a>
</div>
<br /><hr />

<h2>阴影的一个使用特例是卡片效果</h2>
 
<div class="example"> 
<h2 class="example">实例</h2> 
<div class="example_code"> 
div.card {<br />
    width: 250px;<br />
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);<br />
    text-align: center;<br />
}<br />
}
</div><br> 
<a target="_blank" href="/try/try.php?filename=trycss3_box-shadow4" class="tryitbtn">文字卡片 »</a>
<a target="_blank" href="/try/try.php?filename=trycss3_box-shadow5" class="tryitbtn">图片卡片 »</a>
</div>
<br /><hr />

<h2>CSS3 Text Overflow属性</h2>

<p>CSS3文本溢出属性指定应向用户如何显示溢出内容</p>
<div class="example"> 
<h2 class="example">实例</h2> 
<div class="example_code"> 
p.test1 {<br />
    white-space: nowrap; <br />
    width: 200px; <br />
    border: 1px solid #000000;<br />
    overflow: hidden;<br />
    text-overflow: clip; <br />
}<br />
<br />
p.test2 {<br />
    white-space: nowrap; <br />
    width: 200px; <br />
    border: 1px solid #000000;<br />
    overflow: hidden;<br />
    text-overflow: ellipsis; <br />
}
</div><br> 
<a target="_blank" href="/try/try.php?filename=trycss3_text-overflow" class="tryitbtn">尝试一下 »</a>
</div>

<br><hr>


<h2>CSS3的换行</h2>
<p>如果某个单词太长，不适合在一个区域内，它扩展到外面：</p>
<p>CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：</p>
<p>CSS代码如下：</p>
<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>允许长文本换行:</p>
<div class="example_code notranslate">
  
    p {word-wrap:break-word;}
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_word-wrap">尝试一下 »</a>
</div>
<br><hr>

<h2>CSS3 Word Breaking</h2>
<p>CSS3 Word Breaking属性指定换行规则：</p>
<p>CSS代码如下：</p>
<div class="example"> 
<h2 class="example">实例</h2> 
<div class="example_code"> 
p.test1 {<br />
    word-break: keep-all;<br />
}<br />
<br />
p.test2 {<br />
    word-break: break-all;<br />
}

</div><br> 
<a target="_blank" href="/try/try.php?filename=trycss3_word-break" class="tryitbtn">尝试一下 »</a>
</div>
</div>


<br /><hr />
<h2>新文本属性</h2>
<table class="reference">

<tbody><tr>
<th style="width:25%">属性</th>
<th>描述</th>
<th style="width:5%">CSS</th>
</tr>

<tr>
<td><a href="/cssref/css3-pr-hanging-punctuation.html" title="CSS3 hanging-punctuation 属性">hanging-punctuation</a></td>
<td>规定标点字符是否位于线框之外。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-punctuation-trim.html" title="CSS3 punctuation-trim 属性">punctuation-trim</a></td>
<td>规定是否对标点字符进行修剪。</td>
<td>3</td>
</tr>

<tr>
<td>text-align-last</td>
<td>设置如何对齐最后一行或紧挨着强制换行符之前的行。</td>
<td>3</td>
</tr>

<tr>
<td>text-emphasis</td>
<td>向元素的文本应用重点标记以及重点标记的前景色。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-text-justify.html" title="CSS3 text-justify 属性">text-justify</a></td>
<td>规定当  text-align 设置为 "justify" 时所使用的对齐方法。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-text-outline.html" title="CSS3 text-outline 属性">text-outline</a></td>
<td>规定文本的轮廓。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-text-overflow.html" title="CSS3 text-overflow 属性">text-overflow</a></td>
<td>规定当文本溢出包含元素时发生的事情。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-text-shadow.html" title="CSS3 text-shadow 属性">text-shadow</a></td>
<td>向文本添加阴影。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-text-wrap.html" title="CSS3 text-wrap 属性">text-wrap</a></td>
<td>规定文本的换行规则。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-word-break.html" title="CSS3 word-break 属性">word-break</a></td>
<td>规定非中日韩文本的换行规则。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-word-wrap.html" title="CSS3 word-wrap 属性">word-wrap</a></td>
<td>允许对长的不可分割的单词进行分割并换行到下一行。</td>
<td>3</td>
</tr>
</tbody></table>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-backgrounds.html" rel="prev"> CSS3 背景</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-fonts.html" rel="next"> CSS3 字体</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-text-effects.html" rel="prev"> CSS3 文本效果</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-2dtransforms.html" rel="next"> CSS3 2D 转换</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>CSS3 <span class="color_h1">字体</span>
</h1>
<hr>
<img src="/images/font.gif" alt="With CSS3, web designers are no longer forced to use only web-safe fonts"><hr>
<h2>CSS3 @font-face 规则</h2>
<p>以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。</p>
<p>使用CSS3，网页设计师可以使用他/她喜欢的任何字体。</p>
<p>当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。</p>
<p>您所选择的字体在新的CSS3版本有关于@font-face规则描述。</p>
<p>您"自己的"的字体是在 CSS3 @font-face 规则中定义的。</p>
<hr>
<h2>浏览器支持</h2>
<p>表格中的数字表示支持该属性的第一个浏览器版本号。</p>
<table class="browserref notranslate">
  <tbody><tr>
    <th style="width:25%;font-size:16px;text-align:left">属性</th>
    <th style="width:15%" class="bsChrome" title="Chrome"></th>
    <th style="width:15%" class="bsEdge" title="Internet Explorer / Edge"></th>
    <th style="width:15%" class="bsFirefox" title="Firefox"></th>
    <th style="width:15%" class="bsSafari" title="Safari"></th>
    <th style="width:15%" class="bsOpera" title="Opera"></th>                
  </tr>
  <tr>
    <td style="text-align:left">@font-face</td>
    <td>4.0</td>
    <td>9.0</td>
    <td>3.5</td>
    <td>3.2</td>
    <td>10.0</td>
  </tr>
</tbody></table>
<p>Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.</p>
<p>Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。</p>
<p>Chrome, Safari  和 Opera 也支持 SVG 字体/折叠.</p>
<p>Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.</p>
<p><b>注意：</b> Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。</p>
<hr>
<h2>使用您需要的字体</h2>
<p>在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。</p>
<table class="lamp"><tr>
<th width="34"><img src="/images/lamp.jpg" width="32" height="32" alt="lamp"></th>
<td>
<strong>提示：</strong>URL请使用小写字母的字体，大写字母在IE中会产生意外的结果</td>
</tr></table>
<p>如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：</p>

<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<div class="example_code notranslate">
  
    
&lt;style&gt; <br>
  
    
@font-face<br>
{<br>
font-family: myFirstFont;<br>
src: url(sansation_light.woff);<br>
}<br><br>
div<br>
{<br>
font-family:myFirstFont;<br>
}<br>
&lt;/style&gt;
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_font-face_rule">尝试一下 »</a>

  
</div>
<br><hr>
<h2>使用粗体文本</h2>

<p>您必须添加另一个包含粗体文字的@font-face规则：</p>
<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<div class="example_code notranslate">
  
    
@font-face<br>
{<br>
font-family: myFirstFont;<br>
src: url(sansation_bold.woff);<br>
font-weight:bold;<br>
}<br>
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_font-face_rule_bold">尝试一下 »</a>

  
</div>

<p>该文件"Sansation_Bold.ttf"是另一种字体文件，包含Sansation字体的粗体字。</p>
<p>浏览器使用这一文本的字体系列"myFirstFont"时应该呈现为粗体。</p>
<p>这样你就可以有许多相同的字体@font-face的规则。</p>
<hr>
<h2>CSS3 字体描述</h2>

<p>下表列出了所有的字体描述和里面的@font-face规则定义：</p>
<table class="reference">

<tbody><tr>
<th style="width:20%">描述符</th>
<th style="width:25%">值</th>
<th>描述</th>
</tr>

<tr>
<td>font-family</td>
<td><i>name</i></td>
<td>必需。规定字体的名称。</td>
</tr>

<tr>
<td>src</td>
<td><i>URL</i></td>
<td>必需。定义字体文件的 URL。</td>
</tr>

<tr>
<td>font-stretch</td>
<td>
	<ul>
	<li>normal</li>
	<li>condensed</li>
	<li>ultra-condensed</li>
	<li>extra-condensed</li>
	<li>semi-condensed</li>
	<li>expanded</li>
	<li>semi-expanded</li>
	<li>extra-expanded</li>
	<li>ultra-expanded</li>
	</ul>
</td>
<td>可选。定义如何拉伸字体。默认是 "normal"。</td>
</tr>

<tr>
<td>font-style</td>
<td>
	<ul>
	<li>normal</li>
	<li>italic</li>
	<li>oblique</li>
	</ul>
</td>
<td>可选。定义字体的样式。默认是 "normal"。</td>
</tr>

<tr>
<td>font-weight</td>
<td>
	<ul>
	<li>normal</li>
	<li>bold</li>
	<li>100</li>
	<li>200</li>
	<li>300</li>
	<li>400</li>
	<li>500</li>
	<li>600</li>
	<li>700</li>
	<li>800</li>
	<li>900</li>
	</ul>
</td>
<td>可选。定义字体的粗细。默认是 "normal"。</td>
</tr>

<tr>
<td>unicode-range</td>
<td><i>unicode-range</i></td>
<td>可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。</td>
</tr>
</tbody></table>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-text-effects.html" rel="prev"> CSS3 文本效果</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-2dtransforms.html" rel="next"> CSS3 2D 转换</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isplainobject.html" title="jQuery.isPlainObject()   方法">jQuery.isPlainO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isnumeric.html" title="jQuery.isNumeric()  方法">jQuery.isNumeri...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isfunction.html" title="jQuery.isFunction()  方法">jQuery.isFuncti...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-fonts.html" rel="prev"> CSS3 字体</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-3dtransforms.html" rel="next"> CSS3 3D 转换</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>CSS3 <span class="color_h1">2D 转换</span>
</h1>
<hr>
<h2>CSS3 转换</h2>
<p>CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。</p>

<img src="/images/transforms.gif" alt="CSS3 Transforms" width="635" height="124"><h2>它是如何工作？</h2>

<p>变换的效果，让某个元素改变形状，大小和位置。</p>
<p>您可以转换您使用2D或3D元素。</p>

<hr>
<h2>浏览器支持</h2>
<p>表格中的数字表示支持该属性的第一个浏览器版本号。</p>
<p>紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。</p>
<table class="browserref notranslate">
  <tbody><tr>
    <th style="width:25%;font-size:16px;text-align:left">属性</th>
    <th style="width:15%" class="bsChrome" title="Chrome"></th>
    <th style="width:15%" class="bsEdge" title="Internet Explorer / Edge"></th>
    <th style="width:15%" class="bsFirefox" title="Firefox"></th>
    <th style="width:15%" class="bsSafari" title="Safari"></th>
    <th style="width:15%" class="bsOpera" title="Opera"></th>                
  </tr>
  <tr>
    <td style="text-align:left">transform</td>
    <td>36.0<br>4.0&nbsp;-webkit-</td>
    <td>10.0<br>9.0&nbsp;-ms-</td>
    <td>16.0<br>3.5&nbsp;-moz-</td>
    <td>3.2&nbsp;-webkit-</td>
    <td>23.0<br>15.0&nbsp;-webkit-<br>12.1<br>10.5&nbsp;-o-</td>
  </tr>
  <tr>
    <td style="text-align:left">transform-origin<br>(two-value syntax)</td>
    <td>36.0<br>4.0&nbsp;-webkit-</td>
    <td>10.0<br>9.0&nbsp;-ms-</td>
    <td>16.0<br>3.5&nbsp;-moz-</td>
    <td>3.2&nbsp;-webkit-</td>
    <td>23.0<br>15.0&nbsp;-webkit-<br>12.1<br>10.5&nbsp;-o-</td>
  </tr>
</tbody></table>
<p>Internet Explorer 10, Firefox, 和 Opera支持transform 属性.</p>
<p>Chrome 和 Safari 要求前缀 -webkit- 版本.</p>
<p><strong>注意：</strong> Internet Explorer 9 要求前缀 -ms- 版本.</p>
<hr>
<h2>2D 转换</h2>
<p>在本章您将了解2D变换方法：</p>
<ul>
<li>translate()</li>
	<li>rotate()</li>
	<li>scale()</li>
	<li>skew()</li>
	<li>matrix()</li>
</ul>
<p>在下一章中您将了解3D转换。</p>

<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<div class="example_code notranslate">
  
    
    div<br>
	{<br>
	transform: rotate(30deg);<br>
	-ms-transform: rotate(30deg); /* IE 9 */<br>
	-webkit-transform: rotate(30deg); /* Safari and Chrome */<br>
	}	
	
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_transform1">尝试一下 »</a>


</div>
<br><hr>
<h2>translate() 方法</h2>
<img src="/images/transform_translate.gif" alt="Translate"><p>translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。</p>

<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<div class="example_code notranslate">
  
    
    div<br>
	{<br>
	transform: translate(50px,100px);<br>
	-ms-transform: translate(50px,100px); /* IE 9 */<br>	
	-webkit-transform: translate(50px,100px); /* Safari and Chrome */<br>
	}	
	
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_transform_translate">尝试一下 »</a>


</div>

<p>translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。</p>

<hr>
<h2> rotate() 方法</h2>




<img src="/images/transform_rotate.gif" alt="Rotate"><p>rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。</p>

<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<div class="example_code notranslate">
  
    
    div<br>
	{<br>
	transform: rotate(30deg);<br>
	-ms-transform: rotate(30deg); /* IE 9 */<br>
	-webkit-transform: rotate(30deg); /* Safari and Chrome */<br>
	}	
	
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_transform_rotate">尝试一下 »</a>


</div>
<p>rotate值（30deg）元素顺时针旋转30度。</p>

<hr>
<h2>scale() 方法</h2>




<img src="/images/transform_scale.gif" alt="Scale"><p>scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：</p>

<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<div class="example_code notranslate">
  
    
    div<br>
	{<br>
	transform: scale(2,4);<br>
	-ms-transform: scale(2,4); /* IE 9 */<br>
	-webkit-transform: scale(2,4); /* Safari and Chrome */<br>
	}	
	
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_transform_scale">尝试一下 »</a>


</div>

<p>scale（2,4）转变宽度为原来的大小的2倍，和其原始大小4倍的高度。</p>

<hr>
<h2> skew() 方法</h2>
<img src="/images/transform_skew.gif" alt="Skew"><p>skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：</p>

<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<div class="example_code notranslate">
  
    
    div<br>
	{<br>
	transform: skew(30deg,20deg);<br>
	-ms-transform: skew(30deg,20deg); /* IE 9 */<br>
	-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */<br>
	}	
	
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_transform_skew">尝试一下 »</a>


</div>

<p>skew(30deg,20deg)是绕X轴和Y轴周围20度30度的元素。</p>

<hr>
<h2>matrix() 方法</h2>

<img src="/images/transform_rotate.gif" alt="Rotate"><p>matrix()方法和2D变换方法合并成一个。</p>
<p>matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。</p>

<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p class="example">利用matrix()方法旋转div元素30°</p>
<div class="example_code notranslate">
  
    
    div<br>
	{<br>
	transform:matrix(0.866,0.5,-0.5,0.866,0,0);<br>
	-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */<br>
	-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */<br>
	}	
	
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_transform_matrix1">尝试一下 »</a>


</div>
<br><hr>
<h2> 新转换属性</h2>
<p>以下列出了所有的转换属性:</p>
<table class="reference ">
<tr>
<th width="28%" align="left">Property</th>
    <th width="67%" align="left">描述</th>
    <th width="5%" align="left">CSS</th>
  </tr>
<tr>
<td><a href="/cssref/css3-pr-transform.html">transform</a></td>
    <td>适用于2D或3D转换的元素</td>
    <td>3</td>
  </tr>
<tr>
<td><a href="/cssref/css3-pr-transform-origin.html">transform-origin</a></td>
    <td>允许您更改转化元素位置</td>
    <td>3</td>
  </tr>
</table>
<h2>2D 转换方法</h2>

<table class="reference">

<tbody><tr>
<th style="width:25%">函数</th>
<th>描述</th>
</tr>

<tr>
<td>matrix(<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>)</td>
<td>定义 2D 转换，使用六个值的矩阵。</td>
</tr>

<tr>
<td>translate(<i>x</i>,<i>y</i>)</td>
<td>定义 2D 转换，沿着 X 和 Y 轴移动元素。</td>
</tr>

<tr>
<td>translateX(<i>n</i>)</td>
<td>定义 2D 转换，沿着 X 轴移动元素。</td>
</tr>

<tr>
<td>translateY(<i>n</i>)</td>
<td>定义 2D 转换，沿着 Y 轴移动元素。</td>
</tr>

<tr>
<td>scale(<i>x</i>,<i>y</i>)</td>
<td>定义 2D 缩放转换，改变元素的宽度和高度。</td>
</tr>

<tr>
<td>scaleX(<i>n</i>)</td>
<td>定义 2D 缩放转换，改变元素的宽度。</td>
</tr>

<tr>
<td>scaleY(<i>n</i>)</td>
<td>定义 2D 缩放转换，改变元素的高度。</td>
</tr>

<tr>
<td>rotate(<i>angle</i>)</td>
<td>定义 2D 旋转，在参数中规定角度。</td>
</tr>

<tr>
<td>skew(<i>x-angle</i>,<i>y-angle</i>)</td>
<td>定义 2D 倾斜转换，沿着 X 和 Y 轴。</td>
</tr>

<tr>
<td>skewX(<i>angle</i>)</td>
<td>定义 2D 倾斜转换，沿着 X 轴。</td>
</tr>

<tr>
<td>skewY(<i>angle</i>)</td>
<td>定义 2D 倾斜转换，沿着 Y 轴。</td>
</tr>
</tbody></table>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-fonts.html" rel="prev"> CSS3 字体</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-3dtransforms.html" rel="next"> CSS3 3D 转换</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-2dtransforms.html" rel="prev"> CSS3 2D 转换</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-transitions.html" rel="next"> CSS3 过渡</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<style> 
#rotate2D,#rotate3D {
    width: 80px;
    height: 70px;
    color: white;
    position:relative;
    font-weight:bold;
    font-size:15px;
    padding:10px;
    float:left;
    margin-right:50px;
    border-radius:5px;
    border:1px solid #000000;
    background:red;
    margin:10px;
}

</style> 
<script>
<!--
var x,y,n=0,ny=0,rotINT,rotYINT
function rotateDIV()
{
x=document.getElementById("rotate2D")
clearInterval(rotINT)
rotINT=setInterval("startRotate()",10)
}
function rotateYDIV()
{
y=document.getElementById("rotate3D")
clearInterval(rotYINT)
rotYINT=setInterval("startYRotate()",10)
}
function startRotate()
{
n=n+1
x.style.transform="rotate(" + n + "deg)"
x.style.webkitTransform="rotate(" + n + "deg)"
x.style.OTransform="rotate(" + n + "deg)"
x.style.MozTransform="rotate(" + n + "deg)"
if (n==180 || n==360)
	{
	clearInterval(rotINT)
	if (n==360){n=0}
	}
}
function startYRotate()
{
ny=ny+1
y.style.transform="rotateY(" + ny + "deg)"
y.style.webkitTransform="rotateY(" + ny + "deg)"
y.style.OTransform="rotateY(" + ny + "deg)"
y.style.MozTransform="rotateY(" + ny + "deg)"
if (ny==180 || ny>=360)
	{
	clearInterval(rotYINT)
	if (ny>=360){ny=0}
	}
}
//-->
</script>

<h1>CSS3 <span class="color_h1">3D 转换</span>
</h1>
<hr>
<h2>3D Transforms</h2>

<p>CSS3 允许您使用 3D 转换来对元素进行格式化。</p>
<p>在本章中，您将学到其中的一些 3D 转换方法：</p>
<ul>
<li>rotateX()</li>
	<li>rotateY()</li>
</ul>
<p class="example">点击下面的元素，来查看 2D 转换与 3D 转换之间的不同之处：</p>
<div style="height:80px;">
	<div onmouseover="rotateDIV()" id="rotate2D">2D rotate</div>
	<div onmouseover="rotateYDIV()" id="rotate3D">3D rotate</div>
</div>

<br><hr>
<h2>浏览器支持</h2>
<p>表格中的数字表示支持该属性的第一个浏览器版本号。</p>
<p>紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。</p>
<table class="browserref notranslate">
  <tbody><tr>
    <th style="width:25%;font-size:16px;text-align:left">属性</th>
    <th style="width:15%" class="bsChrome" title="Chrome"></th>
    <th style="width:15%" class="bsEdge" title="Internet Explorer / Edge"></th>
    <th style="width:15%" class="bsFirefox" title="Firefox"></th>
    <th style="width:15%" class="bsSafari" title="Safari"></th>
    <th style="width:15%" class="bsOpera" title="Opera"></th>                
  </tr>
  <tr>
    <td style="text-align:left">transform</td>
    <td>36.0<br>12.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>16.0<br>10.0&nbsp;-moz-</td>
    <td>4.0&nbsp;-webkit-</td>
    <td>23.0<br>15.0&nbsp;-webkit-</td>
  </tr>
    <tr>
    <td style="text-align:left">transform-origin<br>(three-value syntax)</td>
    <td>36.0<br>12.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>16.0<br>10.0&nbsp;-moz-</td>
    <td>4.0&nbsp;-webkit-</td>
    <td>23.0<br>15.0&nbsp;-webkit-</td>
    </tr>
    <tr>
    <td style="text-align:left">transform-style</td>
    <td>36.0<br>12.0&nbsp;-webkit-</td>
    <td>11.0</td>
    <td>16.0<br>10.0&nbsp;-moz-</td>
    <td>4.0&nbsp;-webkit-</td>
    <td>23.0<br>15.0&nbsp;-webkit-</td>
    </tr>
    <tr>
    <td style="text-align:left">perspective</td>
    <td>36.0<br>12.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>16.0<br>10.0&nbsp;-moz-</td>
    <td>4.0&nbsp;-webkit-</td>
    <td>23.0<br>15.0&nbsp;-webkit-</td>
    </tr>
    <tr>
    <td style="text-align:left">perspective-origin</td>
    <td>36.0<br>12.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>16.0<br>10.0&nbsp;-moz-</td>
    <td>4.0&nbsp;-webkit-</td>
    <td>23.0<br>15.0&nbsp;-webkit-</td>
    </tr>
    <tr>
    <td style="text-align:left">backface-visibility</td>
    <td>36.0<br>12.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>16.0<br>10.0&nbsp;-moz-</td>
    <td>4.0&nbsp;-webkit-</td>
    <td>23.0<br>15.0&nbsp;-webkit-</td>
    </tr>
</tbody></table>
<h2>rotateX() 方法</h2>

<img src="/images/transform_rotatex.gif" alt="Rotate X"><p>rotateX()方法，围绕其在一个给定度数X轴旋转的元素。</p>

<div class="example">
<img style="float:right" src="/images/incompatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<div class="example_code notranslate">
    div<br>
	{<br>
	transform: rotateX(120deg);<br>
	-webkit-transform: rotateX(120deg); /* Safari and Chrome */<br>
	}	
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_transform_rotateX">尝试一下 »</a>
</div>
<br><hr>
<h2> rotateY() 方法</h2>
<img src="/images/transform_rotatey.gif" alt="Rotate Y"><p>rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。</p>
<div class="example">
<img style="float:right" src="/images/incompatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<div class="example_code notranslate">
    div<br>
	{<br>
	transform: rotateY(130deg);<br>
	-webkit-transform: rotateY(130deg); /* Safari and Chrome */<br>
	}	
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_transform_rotateY">尝试一下 »</a>
</div>
<br><hr>
<h2>转换属性</h2>

<p>下表列出了所有的转换属性：</p>
<table class="reference">

<tbody><tr>
<th style="width:25%">属性</th>
<th>描述</th>
<th style="width:5%">CSS</th>
</tr>

<tr>
<td><a href="/cssref/css3-pr-transform.html" title="CSS3 transform 属性">transform</a></td>
<td>向元素应用 2D 或 3D 转换。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-transform-origin.html" title="CSS3 transform-origin 属性">transform-origin</a></td>
<td>允许你改变被转换元素的位置。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-transform-style.html" title="CSS3 transform-style 属性">transform-style</a></td>
<td>规定被嵌套元素如何在 3D 空间中显示。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-perspective.html" title="CSS3 perspective 属性">perspective</a></td>
<td>规定 3D 元素的透视效果。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-perspective-origin.html" title="CSS3 perspective-origin 属性">perspective-origin</a></td>
<td>规定 3D 元素的底部位置。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-backface-visibility.html" title="CSS3 backface-visibility 属性">backface-visibility</a></td>
<td>定义元素在不面对屏幕时是否可见。</td>
<td>3</td>
</tr>

</tbody></table>
<h2>3D 转换方法</h2>

<table class="reference">

<tbody><tr>
<th style="width:25%">函数</th>
<th>描述</th>
</tr>

<tr>
<td>matrix3d(<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<br><i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>)</td>
<td>定义 3D 转换，使用 16 个值的 4x4 矩阵。</td>
</tr>

<tr>
<td>translate3d(<i>x</i>,<i>y</i>,<i>z</i>)</td>
<td>定义 3D 转化。</td>
</tr>

<tr>
<td>translateX(<i>x</i>)</td>
<td>定义 3D 转化，仅使用用于 X 轴的值。</td>
</tr>

<tr>
<td>translateY(<i>y</i>)</td>
<td>定义 3D 转化，仅使用用于 Y 轴的值。</td>
</tr>

<tr>
<td>translateZ(<i>z</i>)</td>
<td>定义 3D 转化，仅使用用于 Z 轴的值。</td>
</tr>

<tr>
<td>scale3d(<i>x</i>,<i>y</i>,<i>z</i>)</td>
<td>定义 3D 缩放转换。</td>
</tr>

<tr>
<td>scaleX(<i>x</i>)</td>
<td>定义 3D 缩放转换，通过给定一个 X 轴的值。</td>
</tr>

<tr>
<td>scaleY(<i>y</i>)</td>
<td>定义 3D 缩放转换，通过给定一个 Y 轴的值。</td>
</tr>

<tr>
<td>scaleZ(<i>z</i>)</td>
<td>定义 3D 缩放转换，通过给定一个 Z 轴的值。</td>
</tr>

<tr>
<td>rotate3d(<i>x</i>,<i>y</i>,<i>z</i>,<i>angle</i>)</td>
<td>定义 3D 旋转。</td>
</tr>

<tr>
<td>rotateX(<i>angle</i>)</td>
<td>定义沿 X 轴的 3D 旋转。</td>
</tr>

<tr>
<td>rotateY(<i>angle</i>)</td>
<td>定义沿 Y 轴的 3D 旋转。</td>
</tr>

<tr>
<td>rotateZ(<i>angle</i>)</td>
<td>定义沿 Z 轴的 3D 旋转。</td>
</tr>

<tr>
<td>perspective(<i>n</i>)</td>
<td>定义 3D 转换元素的透视视图。</td>
</tr>
</tbody></table>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-2dtransforms.html" rel="prev"> CSS3 2D 转换</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-transitions.html" rel="next"> CSS3 过渡</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-3dtransforms.html" rel="prev"> CSS3 3D 转换</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-animations.html" rel="next"> CSS3 动画</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			 <style>
.animated_div
{
width:60px;
height:40px;
background:#92B901;
color:#ffffff;
position:absolute;
font-weight:bold;
font-size:15px;
padding:10px;
float:left;
margin:5px;
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-webkit-border-radius:5px;
-o-transition-property:width,height,-o-transform,background,font-size,opacity;
-o-transition-duration:1s,1s,1s,1s,1s,1s;
-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration:1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
border-radius:5px;
opacity:0.4;
}

.animated_div:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity:1;
background:#1ec7e6;
width:90px;
height:60px;
font-size:30px;
}
  </style>
<h1>CSS3 <span class="color_h1">过渡</span>
</h1>
<hr>
<h2>CSS3 过渡</h2>
<p>CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。用鼠标移过下面的元素：</p>
<hr>
<p>用鼠标移过下面的元素：</p>
<div style="height:70px">
<div class="animated_div">CSS3<br><span style="font-size:50%">Transition</span>
</div>
</div>
<hr>
<h2>浏览器支持</h2>
<p>表格中的数字表示支持该属性的第一个浏览器版本号。</p>
<p>紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。</p>
<table class="browserref notranslate">
  <tbody><tr>
    <th style="width:25%;font-size:16px;text-align:left">属性</th>
    <th style="width:15%" class="bsChrome" title="Chrome"></th>
    <th style="width:15%" class="bsEdge" title="Internet Explorer / Edge"></th>
    <th style="width:15%" class="bsFirefox" title="Firefox"></th>
    <th style="width:15%" class="bsSafari" title="Safari"></th>
    <th style="width:15%" class="bsOpera" title="Opera"></th>                
  </tr>
  <tr>
    <td style="text-align:left">transition</td>
    <td>26.0<br>4.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>16.0<br>4.0&nbsp;-moz-</td>
    <td>6.1<br>3.1&nbsp;-webkit-</td>
    <td>12.1<br>10.5&nbsp;-o-</td>
  </tr>
  <tr>
    <td style="text-align:left">transition-delay</td>
    <td>26.0<br>4.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>16.0<br>4.0&nbsp;-moz-</td>
    <td>6.1<br>3.1&nbsp;-webkit-</td>
    <td>12.1<br>10.5&nbsp;-o-</td>
  </tr>
  <tr>
    <td style="text-align:left">transition-duration</td>
    <td>26.0<br>4.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>16.0<br>4.0&nbsp;-moz-</td>
    <td>6.1<br>3.1&nbsp;-webkit-</td>
    <td>12.1<br>10.5&nbsp;-o-</td>
  </tr>
  <tr>
    <td style="text-align:left">transition-property</td>
    <td>26.0<br>4.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>16.0<br>4.0&nbsp;-moz-</td>
    <td>6.1<br>3.1&nbsp;-webkit-</td>
    <td>12.1<br>10.5&nbsp;-o-</td>
  </tr>
  <tr>
    <td style="text-align:left">transition-timing-function</td>
    <td>26.0<br>4.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>16.0<br>4.0&nbsp;-moz-</td>
    <td>6.1<br>3.1&nbsp;-webkit-</td>
    <td>12.1<br>10.5&nbsp;-o-</td>
  </tr>
</tbody></table>
<hr>
<h2>它是如何工作？</h2>

<p>CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。</p>

<p>要实现这一点，必须规定两项内容：</p>
<ul>
<li>指定要添加效果的CSS属性</li>
<li>指定效果的持续时间。</li>
</ul>
<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p class="example">应用于宽度属性的过渡效果，时长为 2 秒：</p>
<div class="example_code notranslate">
  
    
    div<br>
	{<br>
	transition: width 2s;<br>
	-webkit-transition: width 2s; /* Safari */<br>
	}	
	
  
</div>
<br>
</div>

<p><b>注意：</b> 如果未指定的期限，transition将没有任何效果，因为默认值是0。</p>

<p>指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：</p>

<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>规定当鼠标指针悬浮(:hover)于 &lt;div&gt;元素上时：</p>
<div class="example_code">
  
    
    div:hover<br>
	{<br>
	width:300px;<br>
	}	
	
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_transition1">尝试一下 »</a>


</div>


<p><b>注意：</b> 当鼠标光标移动到该元素时，它逐渐改变它原有样式</p>
<hr>
<h2>多项改变</h2>
<p>要添加多个样式的变换效果，添加的属性由逗号分隔：</p>

<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>添加了宽度，高度和转换效果：</p>
<div class="example_code notranslate">
  
    
    div<br>
	{<br>
	transition: width 2s, height 2s, transform 2s;<br>
	-webkit-transition: width 2s, height 2s, -webkit-transform 2s;<br>
	}
	
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_transition2">尝试一下 »</a>


</div>

<br><hr>
<h2>过渡属性</h2>

<p>下表列出了所有的过渡属性:</p>

<table class="reference">

<tbody><tr>
<th style="width:30%">属性</th>
<th>描述</th>
<th style="width:5%">CSS</th>
</tr>

<tr>
<td><a href="/cssref/css3-pr-transition.html" title="CSS3 transition 属性">transition</a></td>
<td>简写属性，用于在一个属性中设置四个过渡属性。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-transition-property.html" title="CSS3 transition-property 属性">transition-property</a></td>
<td>规定应用过渡的 CSS 属性的名称。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-transition-duration.html" title="CSS3 transition-duration 属性">transition-duration</a></td>
<td>定义过渡效果花费的时间。默认是 0。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-transition-timing-function.html" title="CSS3 transition-timing-function 属性">transition-timing-function</a></td>
<td>规定过渡效果的时间曲线。默认是 "ease"。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-transition-delay.html" title="CSS3 transition-delay 属性">transition-delay</a></td>
<td>规定过渡效果何时开始。默认是 0。</td>
<td>3</td>
</tr>
</tbody></table>
<p>下面的两个例子设置所有过渡属性：</p>

<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>在一个例子中使用所有过渡属性：</p>
<div class="example_code notranslate">
  
    div<br>
	{<br>
	transition-property: width;<br>
	transition-duration: 1s;<br>
	transition-timing-function: linear;<br>
	transition-delay: 2s;<br>
	/* Safari */<br>
	-webkit-transition-property:width;<br>
	-webkit-transition-duration:1s;<br>
	-webkit-transition-timing-function:linear;<br>
	-webkit-transition-delay:2s;<br>
	}
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_transition4">尝试一下 »</a>


</div>

<br><div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：</p>
<div class="example_code notranslate">
  
    
    div<br>
	{<br>
	transition: width 1s linear 2s;<br>
	/* Safari */<br>
	-webkit-transition:width 1s linear 2s;<br>
	}
	
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_transition5">尝试一下 »</a>


</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-3dtransforms.html" rel="prev"> CSS3 3D 转换</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-animations.html" rel="next"> CSS3 动画</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-transitions.html" rel="prev"> CSS3 过渡</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-multiple-columns.html" rel="next"> CSS3 多列</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<style>
 
#animated_div
{
width:76px;
height:47px;
background:#92B901;
color:#ffffff;
position:relative;
font-weight:bold;
font-size:20px;
padding:10px;
animation:animated_div 5s 1;
-moz-animation:animated_div 5s 1;
-webkit-animation:animated_div 5s 1;
-o-animation:animated_div 5s 1;
border-radius:5px;
-webkit-border-radius:5px;
}

@keyframes animated_div
{
0%		{transform: rotate(0deg);left:0px;}
25%		{transform: rotate(20deg);left:0px;}
50%		{transform: rotate(0deg);left:500px;}
55%		{transform: rotate(0deg);left:500px;}
70%		{transform: rotate(0deg);left:500px;background:#1ec7e6;}
100%	{transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animated_div
{
0%		{-webkit-transform: rotate(0deg);left:0px;}
25%		{-webkit-transform: rotate(20deg);left:0px;}
50%		{-webkit-transform: rotate(0deg);left:500px;}
55%		{-webkit-transform: rotate(0deg);left:500px;}
70%		{-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100%	{-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animated_div
{
0%   {-moz-transform: rotate(0deg);left:0px;}
25%  {-moz-transform: rotate(20deg);left:0px;}
50%  {-moz-transform: rotate(0deg);left:500px;}
55%  {-moz-transform: rotate(0deg);left:500px;}
70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animated_div
{
0%   {transform: rotate(0deg);left:0px;}
25%  {transform: rotate(20deg);left:0px;}
50%  {transform: rotate(0deg);left:500px;}
55%  {transform: rotate(0deg);left:500px;}
70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}
</style>

<h1>CSS3 <span class="color_h1">动画</span>
</h1>
<hr>
<h2>CSS3 动画</h2>
<p>CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。</p>
<hr>
<div id="animated_div">CSS3<br><span style="font-size:10px">动画</span>
</div>
<hr>
<h2>CSS3 @keyframes 规则</h2>
<p>要创建CSS3动画，你将不得不了解@keyframes规则。</p>
<p>@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。</p>
<hr>
<h2>浏览器支持</h2>
<p>表格中的数字表示支持该属性的第一个浏览器版本号。</p>
<p>紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。</p>
<table class="browserref notranslate">
  <tbody><tr>
    <th style="width:25%;font-size:16px;text-align:left">属性</th>
    <th style="width:15%" class="bsChrome" title="Chrome"></th>
    <th style="width:15%" class="bsEdge" title="Internet Explorer / Edge"></th>
    <th style="width:15%" class="bsFirefox" title="Firefox"></th>
    <th style="width:15%" class="bsSafari" title="Safari"></th>
    <th style="width:15%" class="bsOpera" title="Opera"></th>                
  </tr>
  <tr>
    <td style="text-align:left">@keyframes</td>
    <td>43.0<br>4.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>16.0<br>5.0&nbsp;-moz-</td>
    <td>9.0<br>4.0&nbsp;-webkit-</td>
    <td>30.0<br>15.0&nbsp;-webkit-<br>12.0 -o-</td>
  </tr>
  <tr>
    <td style="text-align:left">animation</td>
    <td>43.0<br>4.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>16.0<br>5.0&nbsp;-moz-</td>
    <td>9.0<br>4.0&nbsp;-webkit-</td>
    <td>30.0<br>15.0&nbsp;-webkit-<br>12.0&nbsp;-o-</td>
  </tr>
</tbody></table>
<hr>
<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<div class="example_code notranslate">
  
    
@keyframes myfirst<br>
	{<br>
from {background: red;}<br>
to {background: yellow;}<br>
	}<br><br>
	@-webkit-keyframes myfirst /* Safari and Chrome */<br>
	{<br>
from {background: red;}<br>
to {background: yellow;}<br>
	}<br>
</div>

  
</div>
<br><hr>
<h2>CSS3 动画</h2>
<p>当在 <strong>@keyframes</strong> 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。</p>
<p>指定至少这两个CSS3的动画属性绑定向一个选择器：</p>
<ul>
<li>规定动画的名称</li>
<li>规定动画的时长</li>
</ul>
<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：</p>
<div class="example_code notranslate">
  
    
    div<br>
	{<br>
	animation: myfirst 5s;<br>
	-webkit-animation: myfirst 5s; /* Safari and Chrome */<br>
	}
	
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_animation1">尝试一下 »</a>


</div>
<p><b>注意: </b>您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。</p>

<hr>
<h2>CSS3动画是什么？</h2>


<p>动画是使元素从一种样式逐渐变化为另一种样式的效果。</p>

<p>您可以改变任意多的样式任意多的次数。</p>

<p>请用百分比来规定变化发生的时间，或用关键词 &quot;from&quot; 和 &quot;to&quot;，等同于 0% 和 100%。</p>

<p>0% 是动画的开始，100% 是动画的完成。</p>

<p>为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。</p>


<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：</p>
<div class="example_code notranslate">
  
    
    @keyframes myfirst<br>
	{<br>
	0%   {background: red;}<br>
	25%  {background: yellow;}<br>
	50%  {background: blue;}<br>
	100% {background: green;}<br>
	}<br><br>
    @-webkit-keyframes myfirst /* Safari and Chrome */<br>
	{<br>
	0%   {background: red;}<br>
	25%  {background: yellow;}<br>
	50%  {background: blue;}<br>
	100% {background: green;}<br>
	}
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_animation2">尝试一下 »</a>


</div>

<br><div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>改变背景色和位置：</p>
<div class="example_code notranslate">
  
    
    @keyframes myfirst<br>
	{<br>
	0%   {background: red; left:0px; top:0px;}<br>
	25%  {background: yellow; left:200px; top:0px;}<br>
	50%  {background: blue; left:200px; top:200px;}<br>
	75%  {background: green; left:0px; top:200px;}<br>
	100% {background: red; left:0px; top:0px;}<br>
	}<br><br>
    @-webkit-keyframes myfirst /* Safari and Chrome */<br>
	{<br>
	0%   {background: red; left:0px; top:0px;}<br>
	25%  {background: yellow; left:200px; top:0px;}<br>
	50%  {background: blue; left:200px; top:200px;}<br>
	75%  {background: green; left:0px; top:200px;}<br>
	100% {background: red; left:0px; top:0px;}<br>
	}</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_animation3">尝试一下 »</a>


</div>

<br><hr>
<h2>CSS3的动画属性</h2>

<p>下面的表格列出了 @keyframes 规则和所有动画属性：</p>
<table class="reference">

<tbody><tr>
<th style="width:30%">属性</th>
<th>描述</th>
<th style="width:5%">CSS</th>
</tr>

<tr>
<td><a href="/cssref/css3-pr-animation-keyframes.html" title="CSS3 @keyframes 规则">@keyframes</a></td>
<td>规定动画。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-animation.html" title="CSS3 animation 属性">animation</a></td>
<td>所有动画属性的简写属性，除了 animation-play-state 属性。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-animation-name.html" title="CSS3 animation-name 属性">animation-name</a></td>
<td>规定 @keyframes 动画的名称。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-animation-duration.html" title="CSS3 animation-duration 属性">animation-duration</a></td>
<td>规定动画完成一个周期所花费的秒或毫秒。默认是 0。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-animation-timing-function.html" title="CSS3 animation-timing-function 属性">animation-timing-function</a></td>
<td>规定动画的速度曲线。默认是 "ease"。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-animation-delay.html" title="CSS3 animation-delay 属性">animation-delay</a></td>
<td>规定动画何时开始。默认是 0。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-animation-iteration-count.html" title="CSS3 animation-iteration-count 属性">animation-iteration-count</a></td>
<td>规定动画被播放的次数。默认是 1。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-animation-direction.html" title="CSS3 animation-direction 属性">animation-direction</a></td>
<td>规定动画是否在下一周期逆向地播放。默认是 "normal"。</td>
<td>3</td>
</tr>

<tr>
<td><a href="/cssref/css3-pr-animation-play-state.html" title="CSS3 animation-play-state 属性">animation-play-state</a></td>
<td>规定动画是否正在运行或暂停。默认是 "running"。</td>
<td>3</td>
</tr>
</tbody></table>
<p>下面两个例子设置所有动画属性：</p>

<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>运行myfirst动画，设置所有的属性：</p>
<div class="example_code notranslate">
  
    div<br>
	{<br>
	animation-name: myfirst;<br>
	animation-duration: 5s;<br>
	animation-timing-function: linear;<br>
	animation-delay: 2s;<br>
	animation-iteration-count: infinite;<br>
	animation-direction: alternate;<br>
	animation-play-state: running;<br>
	/* Safari and Chrome: */<br>
	-webkit-animation-name: myfirst;<br>
	-webkit-animation-duration: 5s;<br>
	-webkit-animation-timing-function: linear;<br>
	-webkit-animation-delay: 2s;<br>
	-webkit-animation-iteration-count: infinite;<br>
	-webkit-animation-direction: alternate;<br>
	-webkit-animation-play-state: running;<br>
	} 
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_animation4">尝试一下 »</a>


</div>

<br><div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>与上面的动画相同，但是使用了简写的动画 animation 属性：</p>
<div class="example_code notranslate">
    div<br>
	{<br>
	animation: myfirst 5s linear 2s infinite alternate;<br>
	/* Safari and Chrome: */<br>
	-webkit-animation: myfirst 5s linear 2s infinite alternate;<br>
	}
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_animation5">尝试一下 »</a>


</div>
			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-transitions.html" rel="prev"> CSS3 过渡</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-multiple-columns.html" rel="next"> CSS3 多列</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-animations.html" rel="prev"> CSS3 动画</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-user-interface.html" rel="next"> CSS3 用户界面</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>CSS3 多列</h1>

<p>CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例:</p>
<style> 
.newspaper {
    border:1px black solid;
    padding: 15px;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule: 1px solid lightgrey; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightgrey; /* Firefox */
    column-rule: 1px solid lightgrey;
}
</style>

<p class="newspaper">
菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。
</p>
<hr>
<h2>浏览器支持</h2>
<p>表格中的数字表示支持该方法的第一个浏览器的版本号。</p><p>
紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。</p>
<table class="browserref">
  <tbody><tr>
    <th style="width:25%;font-size:16px;text-align:left;">属性</th>
    <th style="width:15%;" class="bsChrome" title="Chrome"></th>
    <th style="width:15%;" class="bsEdge" title="Internet Explorer / Edge"></th>
    <th style="width:15%;" class="bsFirefox" title="Firefox"></th>
    <th style="width:15%;" class="bsSafari" title="Safari"></th>
    <th style="width:15%;" class="bsOpera" title="Opera"></th>                
  </tr>
  <tr>
    <td style="text-align:left;">column-count</td>
    <td>4.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>2.0&nbsp;-moz-</td>
    <td>3.1&nbsp;-webkit-</td>
    <td>15.0&nbsp;-webkit-<br>11.1</td>
  </tr>
  <tr>
    <td style="text-align:left;">column-gap</td>
    <td>4.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>2.0&nbsp;-moz-</td>
    <td>3.1&nbsp;-webkit-</td>
    <td>15.0&nbsp;-webkit-<br>11.1</td>
  </tr>
    <tr>
    <td style="text-align:left;">column-rule</td>
    <td>4.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>2.0&nbsp;-moz-</td>
    <td>3.1&nbsp;-webkit-</td>
    <td>15.0&nbsp;-webkit-<br>11.1</td>
    </tr>
	<tr>
    <td style="text-align:left;">column-rule-color</td>
    <td>4.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>2.0&nbsp;-moz-</td>
    <td>3.1&nbsp;-webkit-</td>
    <td>15.0&nbsp;-webkit<br>11.1</td>
    </tr>
	<tr>
    <td style="text-align:left;">column-rule-style</td>
    <td>4.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>2.0&nbsp;-moz-</td>
    <td>3.1&nbsp;-webkit-</td>
    <td>15.0&nbsp;-webkit<br>11.1</td>
    </tr>
	<tr>
    <td style="text-align:left;">column-rule-width</td>
    <td>4.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>2.0&nbsp;-moz-</td>
    <td>3.1&nbsp;-webkit-</td>
    <td>15.0&nbsp;-webkit<br>11.1</td>
    </tr>
	<tr>
    <td style="text-align:left;">column-width</td>
    <td>4.0&nbsp;-webkit-</td>
    <td>10.0</td>
    <td>2.0&nbsp;-moz-</td>
    <td>3.1&nbsp;-webkit-</td>
    <td>15.0&nbsp;-webkit<br>11.1</td>
    </tr>
</tbody></table>
<hr>
<h2>CSS3 多列属性</h2>
<p>本章节我们将学习以下几个 CSS3 的多列属性:</p>
<ul>
	<li><code>column-count</code></li>
	<li><code>column-gap</code></li>
	<li><code>column-rule-style</code></li>
	<li><code>column-rule-width</code></li>
	<li><code>column-rule-color</code></li>
	<li><code>column-rule</code></li>
	<li><code>column-span</code></li>
	<li><code>column-width</code></li>
</ul>
<hr>
<h2>CSS3 创建多列</h2>
<p><code>column-count</code> 属性指定了需要分割的列数。</p>
<p>以下实例将 &lt;div&gt; 元素中的文本分为 3 列：</p>
<div class="example">
<h3>实例</h3>
<div class="example_code">
<span class="highELE">div
</span>{<br>
	&nbsp;&nbsp;&nbsp;
	<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span><br>
&nbsp;&nbsp;&nbsp;
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span><br>
&nbsp;&nbsp;&nbsp; <span class="highATT">column-count:</span><span class="highVAL"> 3;</span><br>
}
</div><br>
<a target="_blank" href="/try/try.php?filename=trycss3_column-count" class="tryitbtn">尝试一下 »</a>

</div>
<hr>
<h2>CSS3 多列中列与列间的间隙</h2>
<p><code>column-gap</code> 属性指定了列与列间的间隙。</p>
<p>以下实例指定了列与列间的间隙为 40 像素：</p>
<div class="example">
<h3>实例</h3>
<div class="example_code">
<span class="highELE">div
</span>{<br>
	&nbsp;&nbsp;&nbsp;
	<span class="highATT">-webkit-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span><br>
&nbsp;&nbsp;&nbsp;
<span class="highATT">-moz-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Firefox */</span><br>
&nbsp;&nbsp;&nbsp;
<span class="highATT">column-gap:</span><span class="highVAL"> 40px;</span><br>
}
</div>
<br>
<a target="_blank" href="/try/try.php?filename=trycss3_column-gap" class="tryitbtn">尝试一下 »</a>

</div>
<hr>
<h2>CSS3 列边框</h2>
<p><code>column-rule-style</code> 属性指定了列与列间的边框样式：</p>
<div class="example">
<h3>实例</h3>
<div class="example_code">
<span class="highELE">div
</span>{<br>
	&nbsp;&nbsp;&nbsp;
	<span class="highATT">-webkit-column-rule-style:</span><span class="highVAL"> solid;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span><br>
&nbsp;&nbsp;&nbsp;
<span class="highATT">-moz-column-rule-style:</span><span class="highVAL"> solid;</span> <span class="highCOM">/* Firefox */</span><br>
&nbsp;&nbsp;&nbsp;
<span class="highATT">column-rule-style:</span><span class="highVAL"> solid;</span><br>
}
</div>
<br>
<a target="_blank" href="/try/try.php?filename=trycss3_column-rule-style" class="tryitbtn">尝试一下 »</a>

</div>

<p><code>column-rule-width</code> 属性指定了两列的边框厚度:</p>
<div class="example">
<h3>实例</h3>
<div class="example_code">
<span class="highELE">div
</span>{<br>
	&nbsp;&nbsp;&nbsp;
	<span class="highATT">-webkit-column-rule-width:</span><span class="highVAL"> 1px;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span><br>
&nbsp;&nbsp;&nbsp;
<span class="highATT">-moz-column-rule-width:</span><span class="highVAL"> 1px;</span> <span class="highCOM">/* Firefox */</span><br>
&nbsp;&nbsp;&nbsp;
<span class="highATT">column-rule-width:</span><span class="highVAL"> 1px;</span><br>
}
</div>
<br>
<a target="_blank" href="/try/try.php?filename=trycss3_column-rule-width" class="tryitbtn">尝试一下 »</a>

</div>
<p><code>column-rule-color</code> 属性指定了两列的边框颜色：</p>
<div class="example">
<h3>实例</h3>
<div class="example_code">
<span class="highELE">div
</span>{<br>
	&nbsp;&nbsp;&nbsp;
	<span class="highATT">-webkit-column-rule-color:</span><span class="highVAL"> lightblue;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span><br>
&nbsp;&nbsp;&nbsp;
<span class="highATT">-moz-column-rule-color:</span><span class="highVAL"> lightblue;</span> <span class="highCOM">/* Firefox */</span><br>
&nbsp;&nbsp;&nbsp;
<span class="highATT">column-rule-color:</span><span class="highVAL"> lightblue;</span><br>
}
</div>
<br>
<a target="_blank" href="/try/try.php?filename=trycss3_column-rule-color" class="tryitbtn">尝试一下 »</a>

</div>
<p><code>column-rule</code> 属性是 column-rule-* 所有属性的简写。 </p>
<p>以下实例设置了列直接的边框的厚度，样式及颜色：</p>
<div class="example">
<h3>实例</h3>
<div class="example_code">
<span class="highELE">div
</span>{<br>
	&nbsp;&nbsp;&nbsp;
	<span class="highATT">-webkit-column-rule:</span><span class="highVAL"> 1px solid lightblue;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span><br>
&nbsp;&nbsp;&nbsp;
<span class="highATT">-moz-column-rule:</span><span class="highVAL"> 1px solid lightblue;</span> <span class="highCOM">/* Firefox */</span><br>
&nbsp;&nbsp;&nbsp;
<span class="highATT">column-rule:</span><span class="highVAL"> 1px solid lightblue;</span><br>
}
</div>
<br>
<a target="_blank" href="/try/try.php?filename=trycss3_column-rule" class="tryitbtn">尝试一下 »</a>

</div>
<hr>

<h2>指定元素跨越多少列</h2>

<p>以下实例指定 &lt;h2&gt; 元素跨越所有列：</p>
<div class="example">
<h3>实例</h3>
<div class="example_code">
<span class="highELE">h2 </span>{<br>
	&nbsp;&nbsp;&nbsp;
	<span class="highATT">-webkit-column-span:</span><span class="highVAL"> all;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span><br>
&nbsp;&nbsp;&nbsp;
<span class="highATT">column-span:</span><span class="highVAL"> all;</span><br>
}
</div>
<br>
<a target="_blank" href="/try/try.php?filename=trycss3_column-span" class="tryitbtn">尝试一下 »</a>

</div>
<hr>
<h2>指定列的宽度</h2>
<p><code>column-width</code> 属性指定了列的宽度。</p>

<div class="example">
<h3>实例</h3>
<div class="example_code">
	<span class="highELE">div </span>{<br>
	&nbsp;&nbsp;&nbsp;
	<span class="highATT">-webkit-column-width:</span><span class="highVAL"> 100px;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span><br>
&nbsp;&nbsp;&nbsp;
<span class="highATT">column-width:</span><span class="highVAL"> 100px;</span><br>
}
</div>
<br>
<a target="_blank" href="/try/try.php?filename=trycss3_column-width" class="tryitbtn">尝试一下 »</a>

</div>
<hr>

<h2>CSS3 多列属性</h2>
<p>下表列出了所有 CSS3 的多列属性：</p>
<table class="reference">
  <tbody><tr>
    <th style="width:28%">属性</th>
    <th>描述</th>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-column-count.html">column-count</a></td>
    <td>指定元素应该被分割的列数。</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-column-fill.html">column-fill</a></td>
    <td>指定如何填充列</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-column-gap.html">column-gap</a></td>
    <td>指定列与列之间的间隙</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-column-rule.html">column-rule</a></td>
    <td>所有 column-rule-* 属性的简写</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-column-rule-color.html">column-rule-color</a></td>
    <td>指定两列间边框的颜色</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-column-rule-style.html">column-rule-style</a></td>
    <td>指定两列间边框的样式</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-column-rule-width.html">column-rule-width</a></td>
    <td>指定两列间边框的厚度</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-column-span.html">column-span</a></td>
    <td>指定元素要跨越多少列</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-column-width.html">column-width</a></td>
    <td>指定列的宽度</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-columns.html">columns</a></td>
     <td>设置 column-width 和 column-count 的简写</td>
  </tr>
</tbody></table>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-animations.html" rel="prev"> CSS3 动画</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-user-interface.html" rel="next"> CSS3 用户界面</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isplainobject.html" title="jQuery.isPlainObject()   方法">jQuery.isPlainO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isnumeric.html" title="jQuery.isNumeric()  方法">jQuery.isNumeri...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isfunction.html" title="jQuery.isFunction()  方法">jQuery.isFuncti...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-multiple-columns.html" rel="prev"> CSS3 多列</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-gradients.html" rel="next"> CSS3 渐变</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>CSS3 <span class="color_h1">用户界面</span>
</h1>
<hr>
<h2>CSS3 用户界面</h2>
<p>在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。</p>
<p>在本章中，您将了解以下的用户界面属性：</p>
<ul>
<li>resize</li>
	<li>box-sizing</li>
	<li>outline-offset</li>
</ul>
<hr>
<h2>浏览器支持</h2>
<p>表格中的数字表示支持该属性的第一个浏览器版本号。</p>
<p>紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。</p>
<table class="browsersupport">
<table class="browserref notranslate">
  <tbody><tr>
    <th style="width:25%;font-size:16px;text-align:left">属性</th>
    <th style="width:15%" class="bsChrome" title="Chrome"></th>
    <th style="width:15%" class="bsEdge" title="Internet Explorer / Edge"></th>
    <th style="width:15%" class="bsFirefox" title="Firefox"></th>
    <th style="width:15%" class="bsSafari" title="Safari"></th>
    <th style="width:15%" class="bsOpera" title="Opera"></th>                
  </tr>
  <tr>
    <td style="text-align:left">resize</td>
    <td>4.0</td>
    <td><span class="deprecated">不兼容</span></td>
    <td>5.0<br>4.0&nbsp;-moz-</td>
    <td>4.0</td>
    <td>15.0</td>
  </tr>
 <tr>
    <td style="text-align:left">box-sizing</td>
    <td>10.0<br>4.0&nbsp;-webkit-</td>
    <td>8.0</td>
    <td>29.0<br>2.0&nbsp;-moz-</td>
    <td>5.1<br>3.1&nbsp;-webkit-</td>
    <td>9.5</td>
  </tr>
  <tr>
    <td style="text-align:left">outline-offset</td>
    <td>4.0</td>
    <td><span class="deprecated">不兼容</span></td>
    <td>5.0<br>4.0&nbsp;-moz-</td>
    <td>4.0</td>
    <td>9.5</td>
  </tr>
</tbody></table>
<hr>
<h2>CSS3 调整尺寸(Resizing)</h2>
<p>CSS3中，resize属性指定一个元素是否应该由用户去调整大小。</p>

<div id="resize">这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中)</div>

<p>CSS代码如下：</p>

<div class="example">
<img style="float:right" src="/images/incompatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/incompatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>由用户指定一个div元素尺寸大小：</p>
<div class="example_code notranslate">
  
    div<br>
	{<br>
	resize:both;<br>
	overflow:auto;<br>
	}
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_resize">尝试一下 »</a>


</div>
<br><hr>
<h2>CSS3 方框大小调整(Box Sizing)</h2>
<p>box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。</p>

<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/compatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>规定两个并排的带边框方框：</p>
<div class="example_code notranslate">
  
    div<br>
	{<br>
	box-sizing:border-box;<br>
	-moz-box-sizing:border-box; /* Firefox */<br>
	width:50%;<br>
	float:left;<br>
	}
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_box-sizing">尝试一下 »</a>


</div>
<br><hr>
<h2>CSS3 外形修饰（outline-offset ）</h2>
<p>outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。</p>
<p>轮廓与边框有两点不同：</p>
<ul>
<li>轮廓不占用空间
</li>
	<li>轮廓可能是非矩形</li>
</ul>
<div id="outlineoffset">这个 div 在边框之外 15 像素处有一个轮廓。</div>
<p>The CSS code is as follows:</p>

<div class="example">


<img style="float:right" src="/images/compatible_opera2020.gif" align="middle" title="Opera" alt="Opera" width="20" height="20"><img style="float:right" src="/images/compatible_safari2020.gif" align="middle" title="Safari" alt="Safari" width="20" height="20"><img style="float:right" src="/images/compatible_chrome2020.gif" align="middle" title="Chrome" alt="Chrome" width="20" height="20"><img style="float:right" src="/images/compatible_firefox2020.gif" align="middle" title="Firefox" alt="Firefox" width="20" height="20"><img style="float:right" src="/images/incompatible_ie2020.gif" align="middle" title="Internet Explorer" alt="Internet Explorer" width="20" height="20"><h2 class="example">实例</h2>
<p>规定边框边缘之外 15 像素处的轮廓：</p>
<div class="example_code notranslate">
  
    div<br>
	{<br>
	border:2px solid black;<br>
	outline:2px solid red;<br>
	outline-offset:15px;<br>
	}
  
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_outline-offset">尝试一下 »</a>


</div>
<br><hr>
<h2>新的用户界面特性</h2>
<table class="reference">
  <tbody><tr>
    <th width="28%" align="left">属性</th>
    <th width="67%" align="left">说明</th>
    <th width="5%" align="left">CSS</th>
  </tr>
  <tr>
    <td><a href="/cssref/css3-pr-appearance.html">appearance</a></td>
    <td>允许您使一个元素的外观像一个标准的用户界面元素</td>
    <td>3</td>
  </tr>
  <tr>
    <td><a href="/cssref/css3-pr-box-sizing.html">box-sizing</a></td>
    <td>允许你以适应区域而用某种方式定义某些元素</td>
    <td>3</td>
  </tr>
	<tr>
    <td><a href="/cssref/css3-pr-icon.html">icon</a></td>
    <td>为创作者提供了将元素设置为图标等价物的能力。</td>
    <td>3</td>
  </tr>
	<tr>
    <td><a href="/cssref/css3-pr-nav-down.html">nav-down</a></td>
    <td>指定在何处使用箭头向下导航键时进行导航</td>
    <td>3</td>
  </tr>
	<tr>
    <td><a href="/cssref/css3-pr-nav-index.html">nav-index</a></td>
    <td>指定一个元素的Tab的顺序</td>
    <td>3</td>
  </tr>
	<tr>
    <td><a href="/cssref/css3-pr-nav-left.html">nav-left</a></td>
    <td>指定在何处使用左侧的箭头导航键进行导航</td>
    <td>3</td>
  </tr>
	<tr>
    <td><a href="/cssref/css3-pr-nav-right.html">nav-right</a></td>
    <td>指定在何处使用右侧的箭头导航键进行导航</td>
    <td>3</td>
  </tr>
  <tr>
    <td><a href="/cssref/css3-pr-nav-up.html">nav-up</a></td>
    <td>指定在何处使用箭头向上导航键时进行导航</td>
    <td>3</td>
  </tr>
  <tr>
    <td><a href="/cssref/css3-pr-outline-offset.html">outline-offset</a></td>
    <td>外轮廓修饰并绘制超出边框的边缘</td>
    <td>3</td>
  </tr>
  <tr>
    <td><a href="/cssref/css3-pr-resize.html">resize</a></td>
    <td>指定一个元素是否是由用户调整大小</td>
    <td>3</td>
  </tr>
</tbody></table>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-multiple-columns.html" rel="prev"> CSS3 多列</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-gradients.html" rel="next"> CSS3 渐变</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-border-radius.html" rel="prev"> CSS3 圆角</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-buttons.html" rel="next"> CSS 按钮</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>CSS 图片</h1>
<p class="intro">本章节将为大家介绍如何使用 CSS 来布局图片。</p>
<hr>
<h2>圆角图片</h2>

<div class="example">
<h3>实例</h3>
<p>圆角图片:</p>
<div class="example_code">
	<span class="highELE">img </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">border-radius:</span><span class="highVAL"> 8px;</span><br>}</div>
<br>
<a target="_blank" href="/try/try.php?filename=trycss_ex_images_round" class="tryitbtn">尝试一下 »</a>
</div>

<div class="example">
<h3>实例</h3>
<p>椭圆形图片:</p>
<div class="example_code">
	<span class="highELE">img </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">border-radius:</span><span class="highVAL"> 50%;</span><br>}</div>
	<br>
<a target="_blank" href="/try/try.php?filename=trycss_ex_images_circle" class="tryitbtn">尝试一下 »</a>
</div>
<hr>
<h2>缩略图</h2>
<p>我们使用 <code>border</code> 属性来创建缩略图。</p>
<div class="example">
<h3>实例</h3>
<div class="example_code">
	<span class="highELE">img </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">border:</span><span class="highVAL"> 1px solid #ddd;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">border-radius:</span><span class="highVAL"> 4px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">padding:</span><span class="highVAL"> 5px;</span><br>}<br><br>
	<span class="highELE">&lt;<span style="color:black !important;">img src="paris.jpg"
	alt="Paris"</span>&gt;</span></div>
	<br>
<a target="_blank" href="/try/try.php?filename=trycss_ex_images_thumbnail" class="tryitbtn">尝试一下 »</a>
</div>


<div class="example">
<h3>实例</h3>
<div class="example_code">
	<span class="highELE">a </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">display:</span><span class="highVAL"> inline-block;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">border:</span><span class="highVAL"> 1px solid #ddd;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">border-radius:</span><span class="highVAL"> 4px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">padding:</span><span class="highVAL"> 5px;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">transition:</span><span class="highVAL"> 0.3s;</span><br>}<br><br><span class="highELE">a:hover </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">box-shadow:</span><span class="highVAL"> 0 
	0 2px 1px rgba<br>&nbsp;&nbsp;&nbsp; (0, 140, 186, 0.5);</span><br>}<br><br>
	<span class="highELE">&lt;<span style="color:black !important;">a href="paris.jpg"</span>&gt;<br>&nbsp; 
	&lt;<span style="color:black !important;">img src="paris.jpg" alt="Paris"</span>&gt;<br>&lt;<span style="color:black !important;">/a</span>&gt;</span></div>
	<br>
<a target="_blank" href="/try/try.php?filename=trycss_ex_images_thumbnail_link" class="tryitbtn">尝试一下 »</a>

</div>
<hr>
<h2>响应式图片</h2>
<p>响应式图片会自动适配各种尺寸的屏幕。</p>
<p>实例中，你可以通过重置浏览器大小查看效果:</p>
<p><img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" style="max-width:100%;height:auto;"></p>
<p>如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：</p>
<div class="example">
<h3>实例</h3>
<div class="example_code">
	<span class="highELE">img </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">max-width:</span><span class="highVAL"> 100%;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">height:</span><span class="highVAL"> 
	auto;</span><br>}</div>
	<br>
<a target="_blank" href="/try/try.php?filename=trycss_ex_images_responsive" class="tryitbtn">尝试一下 »</a>
</div>
<p><strong>提示:</strong> Web 响应式设计更多内容可以参考
<a href="/css/css-rwd-intro.html">CSS 响应式设计教程</a>。</p>
<hr>
<h2>图片文本</h2>
<p>如何定位图片文本:</p>
<div class="example">
<h3>实例</h3>
<div>
<div style="position:relative;text-align:center;">
<img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" style="width:100%;height:auto;opacity:0.3">
<div style="position:absolute;bottom:8px;left:16px;font-size:18px">左下角</div>
<div style="position:absolute;top:8px;left:16px;font-size:18px">左上角</div>
<div style="position:absolute;top:8px;right:16px;font-size:18px">右上角</div>
<div style="position:absolute;bottom:8px;right:16px;font-size:18px">右下角</div>
<div style="position:absolute;left:0%;top:50%;width:100%;font-size:18px">居中</div>
</div>
</div>
<p>尝试一下:</p>
<a target="_blank" href="/try/try.php?filename=trycss_image_text_top_left" class="tryitbtn">左上角 »</a>

<a target="_blank" href="/try/try.php?filename=trycss_image_text_top_right" class="tryitbtn">右上角 »</a>

<a target="_blank" href="/try/try.php?filename=trycss_image_text_bottom_left" class="tryitbtn">左下角 »</a>

<a target="_blank" href="/try/try.php?filename=trycss_image_text_bottom_right" class="tryitbtn">右下角 »</a>

<a target="_blank" href="/try/try.php?filename=trycss_image_text_center" class="tryitbtn">居中 »</a>
</div>
<hr>
<h2>卡片式图片</h2>

<div class="example">
<h3>实例</h3>
<div class="example_code">
	<span class="highELE">div.polaroid </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">width:</span><span class="highVAL"> 80%;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">background-color:</span><span class="highVAL"> white;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">box-shadow:</span><span class="highVAL"> 0 4px 8px 0 rgba(0, 
	0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);</span><br>}<br><br><span class="highELE">img </span>{<span class="highATT">width:</span><span class="highVAL"> 100%</span>}<br>
	<br><span class="highELE">div.container </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">text-align:</span><span class="highVAL"> center;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">padding:</span><span class="highVAL"> 10px 20px;</span><br>}</div>
	<br>
<a target="_blank" href="/try/try.php?filename=trycss_ex_images_card" class="tryitbtn">尝试一下 »</a>
</div>
<hr>
<h2>图片滤镜</h2>
<p> CSS <code>filter</code> 属性用为元素添加可视效果 (例如：模糊与饱和度) 。</p>
<p><strong>注意:</strong> Internet Explorer
<span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。</p>
<div class="example">
<h3>实例</h3>
<p>修改所有图片的颜色为黑白 (100% 灰度):</p>

<div class="example_code">
    <span class="highELE">img </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">-webkit-filter:</span><span class="highVAL"> grayscale(100%);</span> <span class="highCOM">/* Chrome, Safari, 
	Opera */</span><br>&nbsp;&nbsp;&nbsp;
  
    <span class="highATT">filter:</span><span class="highVAL"> grayscale(100%);</span><br>}</div>
<div> 
<iframe src="/try/demo_source/trycss_ex_images_filters.htm" style="width:100%;border:none;height:600px;"></iframe>
</div>
<br>
<a target="_blank" href="/try/try.php?filename=trycss_ex_images_filters" class="tryitbtn">尝试一下 »</a>

</div>
<p><strong>提示:</strong> 访问 <a href="/cssref/css3-pr-filter.html">CSS 滤镜参考手册</a> 查看更多内容。</p>
<hr>
<h2>响应式图片相册</h2>
<div class="example">
<h3>实例</h3>

<div class="example_code">
	<span class="highELE">.responsive </span>{<br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">padding:</span><span class="highVAL"> 0 6px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">float:</span><span class="highVAL"> left;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">width:</span><span class="highVAL"> 24.99999%;</span><br>}<br><br><span class="highELE">@media only screen and 
	(max-width: 700px)</span>{<br><span class="highELE">&nbsp;&nbsp;&nbsp; .responsive </span>{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	<span class="highATT">width:</span><span class="highVAL"> 49.99999%;</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="highATT">margin:</span><span class="highVAL"> 6px 
	0;</span><br>&nbsp;&nbsp;&nbsp; }<br>}<br><br><span class="highELE">@media only screen and (max-width: 500px)</span>{<br><span class="highELE">&nbsp;&nbsp;&nbsp; 
	.responsive </span>{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="highATT">width:</span><span class="highVAL"> 100%;</span><br>&nbsp;&nbsp;&nbsp; 
	}<br>}</div>
	<br>
<a target="_blank" href="/try/try.php?filename=trycss_image_gallery_responsive" class="tryitbtn">尝试一下 »</a>

</div>

<hr>
<h2>图片 Modal(模态)</h2>
<p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。 </p>
<p>首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。</p>
<p>然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：</p>
<div class="example">
<h3>实例</h3>

<div class="example_code">
	<span class="highCOM">// 获取模态窗口<br></span><span class="highELE">var</span> modal = document.getElementById(<span class="highVAL">'myModal'</span>);<br><br><span class="highCOM">// 获取图片模态框，alt 属性作为图片弹出中文本描述<br></span><span class="highELE">var</span> img = 
	document.getElementById(<span class="highVAL">'myImg'</span>);<br><span class="highELE">var</span> modalImg = document.getElementById(<span class="highVAL">"img01"</span>);<br>
	<span class="highELE">var</span> captionText = document.getElementById(<span class="highVAL">"caption"</span>);<br>img.onclick = 
	<span class="highELE">function</span>(){<br>&nbsp;&nbsp;&nbsp; modal.style.display = <span class="highVAL">"block"</span>;<br>&nbsp;&nbsp;&nbsp; 
	modalImg.src = this.src;<br>&nbsp;&nbsp;&nbsp; modalImg.alt = this.alt;<br>&nbsp;&nbsp;&nbsp; 
	captionText.innerHTML = this.alt;<br>}<br><br>
	<span class="highCOM">// Get the &lt;span&gt; element that closes the modal<br></span><span class="highELE">var</span> span = 
	document.getElementsByClassName(<span class="highVAL">"close"</span>)[<span class="highVAL">0</span>];<br><br><span class="highCOM">// When the user clicks 
	on &lt;span&gt; (x), close the modal<br></span>span.onclick = <span class="highELE">function</span>() { <br>&nbsp; &nbsp; 
	modal.style.display = <span class="highVAL">"none"</span>;<br>}</div>
	<br>
<a target="_blank" href="/try/try.php?filename=trycss_image_modal_js" class="tryitbtn">尝试一下 »</a>

</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-border-radius.html" rel="prev"> CSS3 圆角</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-buttons.html" rel="next"> CSS 按钮</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-images.html" rel="prev"> CSS 图片</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-pagination.html" rel="next"> CSS 分页实例</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<style>
.w3-ripple{
 position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}
.w3-btn {
    position: relative;
}
.w3-btn, .w3-btn:link, .w3-btn:visited {
    color: #FFFFFF;
    background-color: #73AD21;
    background-color: #4CAF50;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.btn {
background-color: #4CAF50;
border: none;
color: #FFFFFF;
padding: 15px 32px;
text-align: center;	
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
margin: 16px 0 !important;
text-decoration: none;
font-size:16px;
}

.btn1 {background-color: #4CAF50;} /* Green */
.btn2 {background-color: #008CBA;} /* Blue */
.btn3 {background-color: #f44336;} /* Red */ 
.btn4 {background-color: #e7e7e7;color:black;} /* Grey */ 
.btn5 {background-color: #555555;} /* Orange */

.btn1:hover {background-color: #4CAF50;}
.btn2:hover {background-color: #008CBA;}
.btn3:hover {background-color: #f44336;}
.btn4:hover {background-color: #e7e7e7;color:black;}
.btn5:hover {background-color: #555555;}

.font1 {font-size:10px;}
.font2 {font-size:12px;}
.font3 {font-size:16px;}
.font4 {font-size:20px;}
.font5 {font-size:24px;}
.round1 {border-radius:2px}
.round2 {border-radius:4px}
.round3 {border-radius:8px}
.round4 {border-radius:12px}
.round5 {border-radius:50%}
.width1 {width: 250px}
.width2 {width: 50%}
.width3 {width: 100%}

.border1 {border-radius:3px;background-color:white;color:black;border:2px solid #4CAF50;}
.border2 {border-radius:3px;background-color:white;color:black;border:2px solid #008CBA;}
.border3 {border-radius:3px;background-color:white;color:black;border:2px solid #f44336;}
.border4 {border-radius:3px;background-color:white;color:black;border:2px solid #e7e7e7;}
.border5 {border-radius:3px;background-color:white;color:black;border:2px solid #555555;}

.border11:hover {background-color:#4CAF50;color:white;}
.border22:hover {background-color:#008CBA;color:white;}
.border33:hover {background-color:#f44336;color:white;}
.border44:hover {background-color:#e7e7e7;}
.border55:hover {background-color:#555555;color:white;}

.border111{border-radius:3px;background-color:#4CAF50;color:white;}
.border222{border-radius:3px;background-color:#008CBA;color:white;}
.border333 {border-radius:3px;background-color:#f44336;color:white;}
.border444 {border-radius:3px;background-color:#e7e7e7;}
.border555 {border-radius:3px;background-color:#555555;color:white;}

.border111:hover {background-color:white;color:black;border:2px solid #4CAF50;}
.border222:hover {background-color:white;color:black;border:2px solid #008CBA;}
.border333:hover {background-color:white;color:black;border:2px solid #f44336;}
.border444:hover {background-color:white;color:black;border:2px solid #e7e7e7;}
.border555:hover {background-color:white;color:black;border:2px solid #555555;}


.shadow1{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important}
.shadow2:hover{box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19) !important}

.disabled{cursor: not-allowed;opacity: 0.6;}

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 180px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
.pressed {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;	
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.pressed:hover {background-color: #3e8e41}
.w3-ripple:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}
.w3-ripple:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}
.pressed:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.float {
    margin: 0 !important;
	float: left;
    transition: none;
}

.float:hover {
    background-color: #3e8e41;
}
</style>

<h1>CSS 按钮</h1>
<p>本章节我们为大家介绍使用 CSS 来制作按钮。</p>
<hr>
<h2>基本按钮样式</h2>
<p><button style="margin-right:25px;">默认按钮</button> <button class="btn">CSS 按钮</button></p>

<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	<span class="highELE">.button </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">background-color:</span><span class="highVAL"> #4CAF50;</span> <span class="highCOM">/* Green */</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">border:</span><span class="highVAL"> none;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">color:</span><span class="highVAL"> white;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">padding:</span><span class="highVAL"> 15px 32px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">text-align:</span><span class="highVAL"> center;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">text-decoration:</span><span class="highVAL"> none;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">display:</span><span class="highVAL"> inline-block;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">font-size:</span><span class="highVAL"> 16px;</span><br>
	}</div>
	<br><a target="_blank" href="/try/try.php?filename=trycss_buttons_basic" class="tryitbtn">尝试一下 »</a>
</div>
<hr>
<h2>按钮颜色</h2>
<button type="button" class="btn btn1">Green</button>
<button type="button" class="btn btn2">Blue</button>
<button type="button" class="btn btn3">Red</button>
<button type="button" class="btn btn4">Gray</button>
<button type="button" class="btn btn5">Black</button>
<p>我们可以使用 <code>background-color</code> 属性来设置按钮颜色:</p>

<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	.button1 {background-color: #4CAF50;} /* Green */<br>.button2 
	{background-color: #008CBA;} /* Blue */<br>.button3 {background-color: 
	#f44336;} /* Red */ <br>
	.button4 {background-color: #e7e7e7; color: black;} /* Gray */ <br>.button5 
	{background-color: #555555;} /* Black */</div>
	<br><a target="_blank" href="/try/try.php?filename=trycss_buttons_color" class="tryitbtn">尝试一下 »</a>

</div>
<hr>

<h2>按钮大小</h2>

<button type="button" class="btn btn1 font1">10px</button>
<button type="button" class="btn btn2 font2">12px</button>
<button type="button" class="btn btn3 font3">16px</button>
<button type="button" class="btn btn4 font4">20px</button>
<button type="button" class="btn btn5 font5">24px</button>


<p>我们可以使用 <code>font-size</code> 属性来设置按钮大小:</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	.button1 {font-size: 10px;}<br>.button2 {font-size: 12px;}<br>.button3 
	{font-size: 16px;}<br>
	.button4 {font-size: 20px;}<br>.button5 {font-size: 24px;}</div>


<br><a target="_blank" href="/try/try.php?filename=trycss_buttons_font" class="tryitbtn">尝试一下 »</a>

</div>
<hr>

<h2>圆角按钮</h2>

<button type="button" class="btn btn1 round1">2px</button>
<button type="button" class="btn btn2 round2">4px</button>
<button type="button" class="btn btn3 round3">8px</button>
<button type="button" class="btn btn4 round4">12px</button>
<button type="button" class="btn btn5 round5">50%</button>

<p>我们可以使用 <code>border-radius</code> 属性来设置圆角按钮:</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	.button1 {border-radius: 2px;}<br>.button2 {border-radius: 4px;}<br>.button3 
	{border-radius: 8px;}<br>
	.button4 {border-radius: 12px;}<br>.button5 {border-radius: 50%;}</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_buttons_round" class="tryitbtn">尝试一下 »</a>
</div>
<hr>

<h2>按钮边框颜色</h2>

<button type="button" class="btn border1">绿</button>
<button type="button" class="btn border2">蓝</button>
<button type="button" class="btn border3">红</button>
<button type="button" class="btn border4">灰</button>
<button type="button" class="btn border5">黑</button>

<p>我们可以使用 <code>border</code> 属性设置按钮边框颜色:</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	.button1 {<br>&nbsp;&nbsp;&nbsp; background-color: white;<br>&nbsp;&nbsp;&nbsp; color: black;<br>&nbsp;&nbsp;&nbsp; 
	border: 2px solid #4CAF50; /* Green */<br>}<br>...</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_buttons_border" class="tryitbtn">尝试一下 »</a>

</div>
<hr>

<h2>鼠标悬停按钮</h2>

<button type="button" class="btn border1 border111">绿</button>
<button type="button" class="btn border2 border222">蓝</button>
<button type="button" class="btn border3 border333">红</button>
<button type="button" class="btn border4 border444">灰</button>
<button type="button" class="btn border5 border555">黑</button>
<br>

<button type="button" class="btn border1 border11">绿</button>
<button type="button" class="btn border2 border22">蓝</button>
<button type="button" class="btn border3 border33">红</button>
<button type="button" class="btn border4 border44">灰</button>
<button type="button" class="btn border5 border55">黑</button>

<p>我们可以使用 <code>:hover</code> 选择器来修改鼠标悬停在按钮上的样式。</p>
<p><strong>提示:</strong> 我们可以使用 <code>transition-duration</code> 属性来设置 "hover" 效果的速度:</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	.button {<br>&nbsp;&nbsp;&nbsp; -webkit-transition-duration: 0.4s; /* Safari */<br>&nbsp;&nbsp;&nbsp; 
	transition-duration: 0.4s;<br>}<br><br>.button:hover {<br>&nbsp;&nbsp;&nbsp; 
	background-color: #4CAF50; /* Green */<br>&nbsp;&nbsp;&nbsp; color: white;<br>}<br>...</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_buttons_hover" class="tryitbtn">尝试一下 »</a>
</div>
<hr>

<h2>按钮阴影</h2>

<button type="button" class="btn shadow1">阴影按钮</button>
<button type="button" class="btn shadow2">鼠标悬停后显示阴影</button>
<p>我们可以使用 <code>box-shadow</code> 属性来为按钮添加阴影:</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	.button1 {<br>&nbsp;&nbsp;&nbsp; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 
	rgba(0,0,0,0.19);<br>}<br><br>.button2:hover {<br>&nbsp;&nbsp;&nbsp; box-shadow: 0 12px 
	16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);<br>}</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_buttons_shadow" class="tryitbtn">尝试一下 »</a>
</div>
<hr>

<h2>禁用按钮</h2>

<button type="button" class="btn">正常按钮</button>
<button type="button" class="btn disabled">禁用按钮</button>

<p>我们可以使用 <code>opacity</code> 属性为按钮添加透明度 (看起来类似
"disabled" 属性效果)。</p>
<p><strong>提示:</strong> 我么可以添加 <code>cursor</code> 属性并设置为
"not-allowed" 来设置一个禁用的图片:</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	.disabled {<br>&nbsp;&nbsp;&nbsp; opacity: 0.6;<br>&nbsp;&nbsp;&nbsp; cursor: not-allowed;<br>}</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_buttons_disabled" class="tryitbtn">尝试一下 »</a>

</div>
<hr>

<h2>按钮宽度</h2>

<button type="button" class="btn btn1 width1">250px</button><br>
<button type="button" class="btn btn2 width2">50%</button>
<button type="button" class="btn btn3 width3">100%</button>

<p>默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 <code>width</code> 属性来设置按钮的宽度:</p>

<p><strong>提示:</strong> 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	.button1 {width: 250px;}<br>.button2 {width: 50%;}<br>.button3 {width: 
	100%;}</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_buttons_width" class="tryitbtn">尝试一下 »</a>

</div>
<hr>

<h2>按钮组</h2>

<button type="button" class="btn btn1 float">Button</button>
<button type="button" class="btn btn1 float">Button</button>
<button type="button" class="btn btn1 float">Button</button>
<button type="button" class="btn btn1 float">Button</button>

<p style="clear:both"><br>移除外边距并添加 <code>float:left</code> 来设置按钮组:</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	.button {<br>&nbsp;&nbsp;&nbsp; float: left;<br>}</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_buttons_group" class="tryitbtn">尝试一下 »</a>

</div>
<hr>

<h2>带边框按钮组</h2>

<button type="button" class="btn btn1 float" style="border:1px solid green">Button</button>
<button type="button" class="btn btn1 float" style="border:1px solid green">Button</button>
<button type="button" class="btn btn1 float" style="border:1px solid green">Button</button>
<button type="button" class="btn btn1 float" style="border:1px solid green">Button</button>

<p style="clear:both"><br>我们可以使用 <code>border</code> 属性来设置带边框的按钮组:</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	.button {<br>&nbsp;&nbsp;&nbsp; float: left;<br>&nbsp;&nbsp;&nbsp; border: 1px 
	solid green<br>}</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_buttons_group_border" class="tryitbtn">尝试一下 »</a>

</div>
<hr>

<h2>按钮动画</h2>
<div class="example">
<h3>CSS 实例</h3>
<p>鼠标移动到按钮上后添加箭头标记:</p>
<div class="example_code">
<button class="button" style="vertical-align:middle"><span>Hover </span></button>
</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_buttons_animate1" class="tryitbtn">尝试一下 »</a>

</div>
<div class="example">
<h3>CSS 实例</h3>
<p>点击时添加 "波纹" 效果:</p>
<div class="example_code">
<button class="w3-btn w3-ripple" style="margin:5px;width:180px;padding:20px;font-size:28px;"><span>
Click </span></button>
</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_buttons_animate2" class="tryitbtn">尝试一下 »</a>

</div>
<div class="example">
<h3>CSS 实例</h3>
<p>点击时添加 "压下" 效果:</p>
<div class="example_code">

<button class="pressed" style="margin:5px;width:180px;padding:20px;font-size:28px;"><span>
Click </span></button>
</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_buttons_animate3" class="tryitbtn">尝试一下 »</a>

</div>


			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-images.html" rel="prev"> CSS 图片</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-pagination.html" rel="next"> CSS 分页实例</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-buttons.html" rel="prev"> CSS 按钮</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-box-sizing.html" rel="next"> CSS3 框大小</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>CSS 分页实例</h1>
<style>
.article-body ul li { background-image:none}
.pagination,.pagination2,.pagination3 {
  display: inline-block;
  padding: 0;
  margin: 8px 0;
}
.pagination li,.pagination2 li,.pagination3 li {display: inline;}
.pagination li a, .pagination2 li a,.pagination3 li a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
.border li a {
  transition: background-color .3s;
  border:1px solid #ddd;
}
.size li a {font-size:22px;}
.btnround li a {border-radius: 5px;}
.hover li a {transition: background-color .3s;}
.margin li a {margin:0 4px;}
.pagination3 li:first-child a {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.pagination3 li:last-child a {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

ul.pagination2 li a.active, ul.pagination3 li a.active {
  background-color: #4CAF50;
  color: white;
  border:1px solid #4CAF50;
}
ul.pagination2 li a:hover:not(.active), 
ul.pagination3 li a:hover:not(.active) {background-color: #ddd;}
ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
</style>

<p class="intro">本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。</p>
<hr>
<h2>简单分页</h2>

<p>如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。</p>

<p>以下实例演示了如何使用 HTML 和 CSS 来创建分页：</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	<span class="highELE">ul.pagination </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">display:</span><span class="highVAL"> inline-block;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">padding:</span><span class="highVAL"> 0;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">margin:</span><span class="highVAL"> 0;</span><br>}<br><br><span class="highELE">ul.pagination li 
	</span>{<span class="highATT">display:</span><span class="highVAL"> inline;</span>}<br><br><span class="highELE">ul.pagination li a </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">color:</span><span class="highVAL"> 
	black;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">float:</span><span class="highVAL"> left;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">padding:</span><span class="highVAL"> 8px 
	16px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">text-decoration:</span><span class="highVAL"> none;</span><br>}</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_ex_pagination" class="tryitbtn">尝试一下 »</a>
</div>
<hr>
<h2>点击及鼠标悬停分页样式</h2>
<ul class="pagination2">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#" style="border:none !important;">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">»</a></li>
</ul>
<p>如果点击当前页，可以使用 <code>.active</code> 来设置当期页样式，鼠标悬停可以使用 <code>:hover</code> 
选择器来修改样式：</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	<span class="highELE">ul.pagination li a.active </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">background-color:</span><span class="highVAL"> 
	#4CAF50;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">color:</span><span class="highVAL"> white;</span><br>}<br><br><span class="highELE">ul.pagination li 
	a:hover:not(.active) </span>{<span class="highATT">background-color:</span><span class="highVAL"> #ddd;</span>}</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_ex_pagination_active" class="tryitbtn">尝试一下 »</a>

</div>


<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	ul.pagination li a.active {<br>&nbsp;&nbsp;&nbsp; background-color: 
	#4CAF50;<br>&nbsp;&nbsp;&nbsp; color: white;<br>}<br><br>ul.pagination li 
	a:hover:not(.active) {background-color: #ddd;}</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_ex_pagination_active" class="tryitbtn">尝试一下 »</a>

</div>

<h3 style="margin-top:35px;">圆角样式</h3>
<ul class="pagination2 btnround">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#" style="border:none !important;border-radius:5px;">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

<p>可以使用 <code>border-radius</code> 属性为选中的页码来添加圆角样式:</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	ul.pagination li a {<br>&nbsp;&nbsp;&nbsp; border-radius: 5px;<br>}<br><br>ul.pagination li a.active {<br>&nbsp;&nbsp;&nbsp; 
	border-radius: 5px;<br>}</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_ex_pagination_active_round" class="tryitbtn">尝试一下 »</a>
</div>

<h3 style="margin-top:35px;">鼠标悬停过渡效果</h3>
<ul class="pagination2 hover">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#" style="border:none !important;">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

<p>我们可以通过添加 <code>transition</code> 属性来为鼠标移动到页码上时添加过渡效果 to the page links to create a transition effect on hover:</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	ul.pagination li a {<br>&nbsp;&nbsp;&nbsp; transition: background-color .3s;<br>}</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_ex_pagination_transition" class="tryitbtn">尝试一下 »</a>
</div>

<hr>

<h2>带边框分页</h2>
<ul class="pagination2 border">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>
<p>我们可以使用 <code>border</code> 属性来添加带边框分页:</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	ul.pagination li a {<br>&nbsp;&nbsp;&nbsp; border: 1px solid #ddd; /* Gray 
	*/<br>}<br></div>
<br><a target="_blank" href="/try/try.php?filename=trycss_ex_pagination_border" class="tryitbtn">尝试一下 »</a>

</div>

<h3 style="margin-top:35px;">圆角边框</h3>
<p><strong>提示:</strong> 在第一个分页链接和最后一个分页链接添加圆角：</p>
<ul class="pagination3 border">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	.pagination li:first-child a {<br>&nbsp;&nbsp;&nbsp; border-top-left-radius: 
	5px;<br>&nbsp;&nbsp;&nbsp; border-bottom-left-radius: 5px;<br>}<br><br>.pagination li:last-child a {<br>&nbsp;&nbsp;&nbsp; 
	border-top-right-radius: 5px;<br>&nbsp;&nbsp;&nbsp; 
	border-bottom-right-radius: 5px;<br>}<br></div>
<br><a target="_blank" href="/try/try.php?filename=trycss_ex_pagination_border_round" class="tryitbtn">尝试一下 »</a>
</div>

<h3 style="margin-top:35px;">分页间隔</h3>
<p><strong>提示:</strong> 你可以使用 <code>margin</code> 属性来为每个页码直接添加空格：</p>
<ul class="pagination2 border margin">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	ul.pagination li a {<br>&nbsp;&nbsp;&nbsp; margin: 0 4px; /* 0 is for top 
	and bottom. Feel free to change it */<br>}<br></div>
<br><a target="_blank" href="/try/try.php?filename=trycss_ex_pagination_margin" class="tryitbtn">尝试一下 »</a>

</div>
<hr>

<h2>分页字体大小</h2>
<ul class="pagination2 border size">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>
<p>我们可以使用 <code>font-size</code> 属性来设置分页的字体大小:</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	ul.pagination li a {<br>&nbsp;&nbsp;&nbsp; font-size: 22px;<br>}<br></div>
<br><a target="_blank" href="/try/try.php?filename=trycss_ex_pagination_size" class="tryitbtn">尝试一下 »</a>

</div>
<hr>

<h2>居中分页</h2>
<div style="text-align:center;">
<ul class="pagination2 border">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>
</div>
<p>如果要让分页居中，可以在容器元素上 (如 &lt;div&gt;) 添加 <b>text-align:center</b> 样式：</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	div.center {<br>&nbsp;&nbsp;&nbsp; text-align: center;<br>}<br></div>
<br><a target="_blank" href="/try/try.php?filename=trycss_ex_pagination_center" class="tryitbtn">尝试一下 »</a>

</div>
<hr>

<h2>更多实例</h2>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
<iframe src="/try/demo_source/trycss_ex_pagination_nav.htm" style="border:none;width:100%;height:200px;"></iframe>
</div>
<br><a target="_blank" href="/try/try.php?filename=trycss_ex_pagination_nav" class="tryitbtn">尝试一下 »</a>

</div>
<hr>

<h2>面包屑导航</h2>
<ul class="breadcrumb">
  <li><a href="javascript:void(0)">首页</a></li>
  <li><a href="javascript:void(0)">前端</a></li>
  <li><a href="javascript:void(0)">HTML 教程</a></li>
  <li style="color:green">HTML 段落</li>
</ul>
<p>另外一种导航为面包屑导航，实例如下：</p>
<div class="example">
<h3>CSS 实例</h3>
<div class="example_code">
	ul.breadcrumb {<br>&nbsp;&nbsp;&nbsp; padding: 8px 16px;<br>&nbsp;&nbsp;&nbsp; 
	list-style: none;<br>&nbsp;&nbsp;&nbsp; background-color: #eee;<br>}<br><br>
	ul.breadcrumb li {display: inline;}<br><br>ul.breadcrumb li+li:before {<br>&nbsp;&nbsp;&nbsp; 
	padding: 8px;<br>&nbsp;&nbsp;&nbsp; color: black;<br>&nbsp;&nbsp;&nbsp; 
	content: &quot;/\00a0&quot;;<br>}<br></div>
<br><a target="_blank" href="/try/try.php?filename=trycss_breadcrumbs" class="tryitbtn">尝试一下 »</a>
</div>
			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-buttons.html" rel="prev"> CSS 按钮</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-box-sizing.html" rel="next"> CSS3 框大小</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-pagination.html" rel="prev"> CSS 分页实例</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-flexbox.html" rel="next"> CSS3 弹性盒子</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>CSS3 框大小</h1>
<style>
#div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: content-box;
}

#div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
    box-sizing: content-box;    
}

#div3 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

#div4 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;    
}
</style>

<p>CSS3 <code>box-sizing</code> 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。</p>
<hr><h2>
浏览器支持
</h2><p>
表格中的数字表示支持该属性的第一个浏览器的版本号。</p><p>
紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。</p>
<table class="browserref">
  <tbody><tr>
    <th style="width:25%;font-size:16px;text-align:left">属性</th>
    <th style="width:15%" class="bsChrome" title="Chrome"></th>
    <th style="width:15%" class="bsEdge" title="Internet Explorer / Edge"></th>
    <th style="width:15%" class="bsFirefox" title="Firefox"></th>
    <th style="width:15%" class="bsSafari" title="Safari"></th>
    <th style="width:15%" class="bsOpera" title="Opera"></th>                
  </tr>
  <tr>
    <td style="text-align:left">box-sizing</td>
    <td>10.0<br>4.0&nbsp;-webkit-</td>
    <td>8.0</td>
    <td>29.0<br>2.0&nbsp;-moz-</td>
    <td>5.1<br>3.1&nbsp;-webkit-</td>
    <td>9.5</td>
  </tr>
</tbody></table><hr>
<h2>不使用 CSS3 box-sizing 属性</h2>

<p>默认情况下，元素的宽度与高端计算方式如下：</p>
<p><b>width(宽) + padding(内边距) + border(边框) = 元素实际宽度</b></p><p><b>
height(高) + padding(内边距) + border(边框) = 元素实际高度</b></p>

<p>这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。</p>


<div id="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
<br>
<div id="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>

<p>以上两个 &lt;div&gt; 元素虽然宽度与高度设置一样，但真实展示的大小不一致，因为 div2 指定了内边距:</p>

<div class="example">
<h3>实例</h3>
<div class="example_code">
	<span class="highELE">.div1 </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">width:</span><span class="highVAL"> 300px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">height:</span><span class="highVAL"> 
	100px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">border:</span><span class="highVAL"> 1px solid blue;</span> <br>}<br>
	<br><span class="highELE">.div2 </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">width:</span><span class="highVAL"> 300px;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">height:</span><span class="highVAL"> 100px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">padding:</span><span class="highVAL"> 50px;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">border:</span><span class="highVAL"> 1px solid red;</span><br>} </div>

	<br>
<a target="_blank" href="/try/try.php?filename=trycss3_box-sizing_old" class="tryitbtn">尝试一下 »</a>
</div>

<p>使用这种方式如果想要获得较小的那个框且包含内边距，就不得不考虑到边框和内边距的宽度。</p>

<p>CSS3 的 <code>box-sizing</code> 属性很好的解决了这个问题。</p>

<hr>

<h2>使用 CSS3 box-sizing 属性</h2>

<p>CSS3 <code>box-sizing</code> 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。</p>
<p>如果在元素上设置了 <code>box-sizing: border-box;</code> 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:</p>

<div id="div3">两个 div 现在是一样大小的!</div>
<br>
<div id="div4">菜鸟教程!</div>
<br>
<p>以下是两个 &lt;div&gt;  元素添加 <code>box-sizing: border-box;</code> 属性的简单实例。</p>

<div class="example">
<h3>实例</h3>
<div class="example_code">
	<span class="highELE">.div1 </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">width:</span><span class="highVAL"> 300px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">height:</span><span class="highVAL"> 
	100px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">border:</span><span class="highVAL"> 1px solid blue;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">box-sizing:</span><span class="highVAL"> border-box;</span><br>}<br>
	<br><span class="highELE">.div2 </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">width:</span><span class="highVAL"> 300px;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">height:</span><span class="highVAL"> 100px;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">padding:</span><span class="highVAL"> 50px;</span><br>&nbsp;&nbsp;&nbsp; 
	<span class="highATT">border:</span><span class="highVAL"> 1px solid red;</span><br>&nbsp;&nbsp;&nbsp; <span class="highATT">box-sizing:</span><span class="highVAL"> border-box;</span><br>} </div>
	<br>
<a target="_blank" href="/try/try.php?filename=trycss3_box-sizing_new" class="tryitbtn">尝试一下 »</a>
</div>

<p>从结果上看 <code>box-sizing: border-box;</code> 效果更好，也正是很多开发人员需要的效果。</p>
<p>以下代码可以让所有元素以更直观的方式展示大小。很多浏览器已经支持 <code>box-sizing: border-box;</code> (但是并非所有 - 这就是为什么
input 和 text 元素设置了 width: 100%; 后的宽度却不一样)。 </p>

<p>所有元素使用 box-sizing 是比较推荐的：</p>
<div class="example">
<h3>实例</h3>
<div class="example_code">
	<span class="highELE">* </span>{<br>&nbsp;&nbsp;&nbsp; <span class="highATT">box-sizing:</span><span class="highVAL"> border-box;</span><br>}
</div><br>
<a target="_blank" href="/try/try.php?filename=trycss3_box-sizing_all" class="tryitbtn">尝试一下 »</a>
</div>








			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-pagination.html" rel="prev"> CSS 分页实例</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-flexbox.html" rel="next"> CSS3 弹性盒子</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-box-sizing.html" rel="prev"> CSS3 框大小</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-mediaqueries.html" rel="next"> CSS3 多媒体查询</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h2>CSS3 弹性盒子(Flex Box)</h1>

<p>弹性盒子是 CSS3 的一种新的布局模式。</p>

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。


<p>引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。</p>
<hr>
<h2>浏览器支持</h2>
<p>表格中的数字表示支持该属性的第一个浏览器的版本号。</p><p>
紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。</p>

<table class="browserref">
  <tbody><tr>
    <th style="width:25%;font-size:16px;text-align:left">属性</th>
    <th style="width:15%" class="bsChrome" title="Chrome"></th>
    <th style="width:15%" class="bsEdge" title="Internet Explorer / Edge"></th>
    <th style="width:15%" class="bsFirefox" title="Firefox"></th>
    <th style="width:15%" class="bsSafari" title="Safari"></th>
    <th style="width:15%" class="bsOpera" title="Opera"></th>                
  </tr>
  <tr>
    <td style="text-align:left">Basic support<br>(single-line flexbox)</td>
    <td>29.0<br>21.0&nbsp;-webkit-</td>
    <td>11.0</td>
    <td>22.0<br>18.0&nbsp;-moz-</td>
    <td>6.1&nbsp;-webkit-</td>
    <td>12.1&nbsp;-webkit-</td>
  </tr>
  <tr>
    <td style="text-align:left">Multi-line flexbox</td>
    <td>29.0<br>21.0&nbsp;-webkit-</td>
    <td>11.0</td>
    <td>28.0</td>
    <td>6.1&nbsp;-webkit-</td>
    <td>17.0<br>15.0&nbsp;-webkit-<br>12.1</td>
  </tr>
  </tbody></table><hr>

<h2>CSS3 弹性盒子内容</h2>

<p>弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。</p>
<p>弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。</p>
<p>弹性容器内包含了一个或多个弹性子元素。</p>
<p><strong>注意：</strong> 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。</p>
<p>弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。</p>
<p>以下元素展示了弹性子元素在一行内显示，从左到右:</p>

<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>&lt;style&gt; <br><span style="color:brown">.flex-container</span> {<br>&nbsp;&nbsp;&nbsp; <span style="color:red">display:</span> <span style="color:mediumblue">-webkit-flex;</span><br>&nbsp;&nbsp;&nbsp; <span style="color:red">display:</span> <span style="color:mediumblue">flex;</span><br>&nbsp;&nbsp;&nbsp; <span style="color:red">width:</span> 
	<span style="color:mediumblue">400px;</span><br>&nbsp;&nbsp;&nbsp; <span style="color:red">height:</span> <span style="color:mediumblue">250px;</span><br>&nbsp;&nbsp;&nbsp; <span style="color:red">background-color:</span> 
	<span style="color:mediumblue">lightgrey;</span><br>}<br><br><span style="color:brown">.flex-item</span>
	{<br>&nbsp;&nbsp;&nbsp; <span style="color:red">background-color:</span> <span style="color:mediumblue">cornflowerblue;</span><br>&nbsp;&nbsp;&nbsp; <span style="color:red">width:</span> <span style="color:mediumblue">100px;</span><br>&nbsp;&nbsp;&nbsp; <span style="color:red">height:</span> <span style="color:mediumblue">100px;</span><br>
	&nbsp;&nbsp;&nbsp;
	<span style="color:red">margin:</span> <span style="color:mediumblue">10px;</span><br>}<br>&lt;/style&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br><br>&lt;div 
	class=&quot;flex-container&quot;&gt;<br>&nbsp; &lt;div class=&quot;flex-item&quot;&gt;flex item 1&lt;/div&gt;<br>&nbsp; 
	&lt;div class=&quot;flex-item&quot;&gt;flex item 2&lt;/div&gt;<br>&nbsp; &lt;div 
	class=&quot;flex-item&quot;&gt;flex item 3&lt;/div&gt; <br>&lt;/div&gt;<br><br>&lt;/body&gt;<br>&lt;/html&gt;</div>

	<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_flexline">尝试一下 »</a>

</div>

<p>当然我们可以修改排列方式。</p>
<p>如果我们设置 <code>direction</code> 
属性为 <code>rtl</code> (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	body {<br>&nbsp;&nbsp;&nbsp; direction: rtl;<br>}<br><br>.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; width:
	400px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>}<br><br>.flex-item 
	{<br>&nbsp;&nbsp;&nbsp; background-color: cornflowerblue;<br>&nbsp;&nbsp;&nbsp; width: 100px;<br>&nbsp;&nbsp;&nbsp; height: 100px;<br>
	&nbsp;&nbsp;&nbsp;
	margin: 10px;<br>} </div>
	<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_flexline_rtl">尝试一下 »</a>
<p>

</p>
</div>
<hr>

<h2>flex-direction</h2>
<p><code>flex-direction</code> 顺序指定了弹性子元素在父容器中的位置。</p>
<h3>语法</h3>
<pre>
flex-direction: row | row-reverse | column | column-reverse
</pre>
<p><code>flex-direction</code>的值有:</p>
<ul>
<li>row：横向从左到右排列（左对齐），默认的排列方式。</li>
<li>row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。</li>
<li>column：纵向排列。</li>
<li>column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。</li>
</ul>

<p>以下实例演示了 <code>row-reverse</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-flex-direction: row-reverse;<br>&nbsp;&nbsp;&nbsp; flex-direction: 
	row-reverse;<br>&nbsp;&nbsp;&nbsp; width: 
	400px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
<p>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_direction_row-reverse">尝试一下 »</a>

</div>
<p>以下实例演示了 <code>column</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-flex-direction: column;<br>&nbsp;&nbsp;&nbsp; flex-direction: 
	column;<br>&nbsp;&nbsp;&nbsp; width: 
	400px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
	<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_direction_column">尝试一下 »</a>
<p>

</p>
</div>
<p>以下实例演示了 <code>column-reverse</code> 的使用:</p>

<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-flex-direction: column-reverse;<br>&nbsp;&nbsp;&nbsp; flex-direction: 
	column-reverse;<br>&nbsp;&nbsp;&nbsp; width: 
	400px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
	<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_direction_column-reverse">尝试一下 »</a>

</div>
<hr>

<h2>justify-content 属性</h2>
<p>内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。</p>
<p>justify-content 语法如下：</p>
<pre>justify-content: flex-start | flex-end | center | space-between | space-around</pre>
<p>各个值解析:</p>
<ul>
<li><b>flex-start：</b><br>
<p>弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。</p></li>
<li><b>flex-end：</b><br><p>弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。</p></li>
<li><b>center：</b><br><p>弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。</p></li>
<li><b>space-between：</b><br><p>弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。</p></li>
<li><b>space-around：</b><br><p>弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。</p></li>
</ul>
<p>效果图展示：</p>
<p><img src="http://www.runoob.com/wp-content/uploads/2016/04/2259AD60-BD56-4865-8E35-472CEABF88B2.jpg"></p>
<p>以下实例演示了 <code>flex-end</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-justify-content: flex-end;<br>&nbsp;&nbsp;&nbsp; justify-content: 
	flex-end;<br>&nbsp;&nbsp;&nbsp; width: 
	400px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>

<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_justify_flex-end">尝试一下 »</a>


</div>
<p>以下实例演示了 <code>center</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-justify-content: center;<br>&nbsp;&nbsp;&nbsp; justify-content: 
	center;<br>&nbsp;&nbsp;&nbsp; width: 
	400px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_justify_center">尝试一下 »</a>

</div>
<p>以下实例演示了 <code>space-between</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-justify-content: space-between;<br>&nbsp;&nbsp;&nbsp; justify-content: 
	space-between;<br>&nbsp;&nbsp;&nbsp; width: 
	400px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_justify_space-between">尝试一下 »</a>

</div>
<p>以下实例演示了 <code>space-around</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-justify-content: space-around;<br>&nbsp;&nbsp;&nbsp; justify-content: 
	space-around;<br>&nbsp;&nbsp;&nbsp; width: 
	400px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_justify_space-around">尝试一下 »</a>

</div>
<hr>

<h2>align-items 属性</h2>
<p><code>align-items</code> 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。</p>
<h3>语法</h3>
<pre>
align-items: flex-start | flex-end | center | baseline | stretch
</pre>
<p>各个值解析:</p>
<ul>
<li>flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。</li>
<li>flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。</li>
<li>center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。</li>
<li>baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。</li>
<li>stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。</li>
</ul>
<p>以下实例演示了 <code>stretch(默认值)</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-align-items: stretch;<br>&nbsp;&nbsp;&nbsp; align-items: 
	stretch;<br>&nbsp;&nbsp;&nbsp; width: 
	400px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_align_stretch">尝试一下 »</a>
	
</div>
<p>以下实例演示了 <code>flex-start</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-align-items: flex-start;<br>&nbsp;&nbsp;&nbsp; align-items: 
	flex-start;<br>&nbsp;&nbsp;&nbsp; width: 
	400px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_align_flex-start">尝试一下 »</a>

</div>
<p>以下实例演示了 <code>flex-end</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-align-items: flex-end;<br>&nbsp;&nbsp;&nbsp; align-items: 
	flex-end;<br>&nbsp;&nbsp;&nbsp; width: 
	400px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_align_flex-end">尝试一下 »</a>

</div>
<p>以下实例演示了 <code>center</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-align-items: center;<br>&nbsp;&nbsp;&nbsp; align-items: 
	center;<br>&nbsp;&nbsp;&nbsp; width: 
	400px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_align_center">尝试一下 »</a>
	
</div>
<p>以下实例演示了 <code>baseline</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-align-items: baseline;<br>&nbsp;&nbsp;&nbsp; align-items: 
	baseline;<br>&nbsp;&nbsp;&nbsp; width: 
	400px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_align_baseline">尝试一下 »</a>
	
</div>
<hr>

<h2>flex-wrap 属性</h2>
<p><b>flex-wrap</b> 属性用于指定弹性盒子的子元素换行方式。</p>
<h3>语法</h3>
<pre>
flex-flow:  || 
</pre>
<p>各个值解析:</p>
<ul>
	<li><b>nowrap</b> - 默认，
弹性容器为单行。该情况下弹性子项可能会溢出容器。</li>
	<li><b>wrap</b> - 
弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行</li>
	<li><b>wrap-reverse</b> -反转 wrap 排列。</li>
</ul>
<p>以下实例演示了 <code>nowrap</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-flex-wrap: nowrap;<br>&nbsp;&nbsp;&nbsp; flex-wrap: nowrap;<br>&nbsp;&nbsp;&nbsp; width: 
	300px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_nowrap">尝试一下 »</a>
	
</div>
<p>以下实例演示了 <code>wrap</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-flex-wrap: wrap;<br>&nbsp;&nbsp;&nbsp; flex-wrap: wrap;<br>&nbsp;&nbsp;&nbsp; width: 
	300px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_wrap">尝试一下 »</a>
	
</div>
<p>以下实例演示了 <code>wrap-reverse</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-flex-wrap: wrap-reverse;<br>&nbsp;&nbsp;&nbsp; flex-wrap: 
	wrap-reverse;<br>&nbsp;&nbsp;&nbsp; width: 
	300px;<br>&nbsp;&nbsp;&nbsp; height: 250px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_wrap-reverse">尝试一下 »</a>

</div>
<hr>

<h2>align-content 属性</h2>
<p><code>align-content</code> 属性用于修改 <code>
flex-wrap</code> 属性的行为。类似于 <code>align-items</code>, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。</p>
<h3>语法</h3>
<pre>
align-content: flex-start | flex-end | center | space-between | space-around | stretch
</pre>
<p>各个值解析:</p>
<ul>
	<li><code>stretch</code> - 默认。各行将会伸展以占用剩余的空间。</li>
	<li><code>flex-start</code> - 各行向弹性盒容器的起始位置堆叠。</li>
	<li><code>flex-end</code> - 各行向弹性盒容器的结束位置堆叠。</li>
	<li><code>center</code> -各行向弹性盒容器的中间位置堆叠。</li>
	<li><code>space-between</code> -各行在弹性盒容器中平均分布。</li>
	<li><code>space-around</code> - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。</li>
</ul>
<p>以下实例演示了 <code>center</code> 的使用:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-container {<br>&nbsp;&nbsp;&nbsp; display: -webkit-flex;<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-flex-wrap: wrap;<br>&nbsp;&nbsp;&nbsp; flex-wrap: 
	wrap;<br>&nbsp;&nbsp;&nbsp; 
	-webkit-align-content: center;<br>&nbsp;&nbsp;&nbsp; align-content: 
	center;<br>&nbsp;&nbsp;&nbsp; width: 
	300px;<br>&nbsp;&nbsp;&nbsp; height: 300px;<br>&nbsp;&nbsp;&nbsp; background-color: 
	lightgrey;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_align-content">尝试一下 »</a>

</div>
<hr>

<h2>弹性子元素属性</h2>
<h3>排序</h3>
<h3>语法</h3>
<pre>
order: 
</pre>
<p>各个值解析:</p>
<ul>
<li>&lt;integer&gt;：用整数值来定义排列顺序，数值小的排在前面。可以为负值。</li>
</ul>
<p><code>order</code> 属性设置弹性容器内弹性子元素的属性:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-item {<br>&nbsp;&nbsp;&nbsp; background-color: cornflowerblue;<br>&nbsp;&nbsp;&nbsp; 
	width: 100px;<br>&nbsp;&nbsp;&nbsp; height: 100px;<br>&nbsp;&nbsp;&nbsp; 
	margin: 10px;<br>}<br>
	<br>.first {<br>&nbsp;&nbsp;&nbsp; -webkit-order: -1;<br>&nbsp;&nbsp;&nbsp; 
	order: -1;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_order">尝试一下 »</a>
	
</div>

<h3>对齐</h3>
<p>设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全集中。</p>
<p>以下实例在第一个弹性子元素上设置了 <code>margin-right: auto;</code> 。 它将剩余的空间放置在元素的右侧：</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-item {<br>&nbsp;&nbsp;&nbsp; background-color: cornflowerblue;<br>&nbsp;&nbsp;&nbsp; 
	width: 75px;<br>&nbsp;&nbsp;&nbsp; height: 75px;<br>&nbsp;&nbsp;&nbsp; 
	margin: 10px;<br>}<br><br>.flex-item:first-child {<br>&nbsp;&nbsp;&nbsp; 
	margin-right: auto;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_margin">尝试一下 »</a>
	
</div>

<h3>完美的居中</h3>
<p>以下实例将完美解决我们平时碰到的居中问题。</p>
<p>使用弹性盒子，居中变的很简单，只想要设置  <code>margin: auto;</code> 可以使得弹性子元素在两上轴方向上完全居中:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-item {<br>&nbsp;&nbsp;&nbsp; background-color: cornflowerblue;<br>&nbsp;&nbsp;&nbsp; 
	width: 75px;<br>&nbsp;&nbsp;&nbsp; height: 75px;<br>&nbsp;&nbsp;&nbsp; 
	margin: auto;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_margin2">尝试一下 »</a>
	
</div>

<h3>align-self</h3>
<p><code>align-self</code> 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。</p>
<h3>语法</h3>
<pre>
align-self: auto | flex-start | flex-end | center | baseline | stretch
</pre>
<p>各个值解析:</p>
<ul>
<li>auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。</li>
<li>flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。</li>
<li>flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。</li>
<li>center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。</li>
<li>baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。</li>
<li>stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。</li>
</ul>
<p>以下实例演示了弹性子元素上 align-self 不同值的应用效果：</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-item {<br>&nbsp;&nbsp;&nbsp; background-color: cornflowerblue;<br>&nbsp;&nbsp;&nbsp; 
	width: 60px;<br>&nbsp;&nbsp;&nbsp; min-height: 100px;<br>&nbsp;&nbsp;&nbsp; 
	margin: 10px;<br>}<br><br>.item1 {<br>&nbsp;&nbsp;&nbsp; 
	-webkit-align-self: flex-start;<br>&nbsp;&nbsp;&nbsp; align-self: 
	flex-start;<br>}<br>.item2 {<br>&nbsp;&nbsp;&nbsp; 
	-webkit-align-self: flex-end;<br>&nbsp;&nbsp;&nbsp; align-self: flex-end;<br>
	}<br><br>.item3 {<br>&nbsp;&nbsp;&nbsp; 
	-webkit-align-self: center;<br>&nbsp;&nbsp;&nbsp; align-self: center;<br>}<br><br>.item4 {<br>&nbsp;&nbsp;&nbsp; -webkit-align-self: 
	baseline;<br>&nbsp;&nbsp;&nbsp; align-self: baseline;<br>}<br><br>.item5 {<br>&nbsp;&nbsp;&nbsp; 
	-webkit-align-self: stretch;<br>&nbsp;&nbsp;&nbsp; align-self: stretch;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_align-self">尝试一下 »</a>
	
</div>

<h3>flex</h3>
<p><code>flex</code> 属性用于指定弹性子元素如何分配空间。</p>
<h3>语法</h3>
<pre>
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
</pre>
<p>各个值解析:</p>
<ul>
<li>none：none关键字的计算值为: 0 0 auto</li>
<li>[&nbsp;flex-grow&nbsp;]：定义弹性盒子元素的扩展比率。</li>
<li>[&nbsp;flex-shrink&nbsp;]：定义弹性盒子元素的收缩比率。</li>
<li>[&nbsp;flex-basis&nbsp;]：定义弹性盒子元素的默认基准值。</li>
</ul>
<p>以下实例中，第一个弹性子元素占用了 2/4 的空间，其他两个各占 1/4 的空间:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	.flex-item {<br>&nbsp;&nbsp;&nbsp; background-color: cornflowerblue;<br>&nbsp;&nbsp;&nbsp; 
	margin: 10px;<br>}<br><br>.item1 {<br>&nbsp;&nbsp;&nbsp; -webkit-flex: 2;<br>&nbsp;&nbsp;&nbsp; 
	flex: 2;<br>}<br><br>.item2 {<br>&nbsp;&nbsp;&nbsp; -webkit-flex: 1;<br>&nbsp;&nbsp;&nbsp; 
	flex: 1;<br>}<br><br>.item3 {<br>&nbsp;&nbsp;&nbsp; -webkit-flex: 1;<br>&nbsp;&nbsp;&nbsp; 
	flex: 1;<br>} </div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_flexbox_flex_number">尝试一下 »</a>
	
</div>
<hr>
<div class="tryit_ex">
<img src="/images/tryitimg.gif" style="height:46px;width:40px" alt="实例">
<h2>更多实例</h2>
</div>
<p><a target="_blank" href="/try/try.php?filename=trycss3_flexbox_website">使用弹性盒子创建响应式页面</a></p>
<hr>

<h2>CSS3 弹性盒子属性</h2>
<p>下表列出了在弹性盒子中常用到的属性:</p>
<table class="reference">
  <tr>
    <th style="width:25%">属性</th>
    <th>描述</th>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/pr-class-display.html">display</a></td>
    <td>指定 HTML  元素盒子类型。</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-flex-direction.html">flex-direction</a></td>
    <td>指定了弹性容器中子元素的排列方式</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-justify-content.html">justify-content</a></td>
    <td>设置弹性盒子元素在主轴（横轴）方向上的对齐方式。</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-align-items.html">align-items</a></td>
    <td>设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-flex-wrap.html">flex-wrap</a></td>
    <td>设置弹性盒子的子元素超出父容器时是否换行。</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-align-content.html">align-content</a></td>
    <td>修改 flex-wrap 属性的行为，类似
	align-items, 但不是设置子元素对齐，而是设置行对齐</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-flex-flow.html">flex-flow</a></td>
    <td>flex-direction 和 flex-wrap 的简写</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-order.html">order</a></td>
    <td>设置弹性盒子的子元素排列顺序。</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-align-self.html">align-self</a></td>
    <td>在弹性子元素上使用。覆盖容器的 align-items 属性。</td>
  </tr>
  <tr>
    <td><a target="_blank" href="/cssref/css3-pr-flex.html">flex</a></td>
    <td>设置弹性盒子的子元素如何分配空间。</td>
  </tr>
</table>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-box-sizing.html" rel="prev"> CSS3 框大小</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-mediaqueries.html" rel="next"> CSS3 多媒体查询</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-flexbox.html" rel="prev"> CSS3 弹性盒子</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-mediaqueries-ex.html" rel="next"> CSS3 多媒体查询实例</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>CSS3 多媒体查询</h1>
<hr>
<h2>CSS2 多媒体类型</h2>

<p><code>@media</code> 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。</p>

<p>例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。</p>
<p>但是这些多媒体类型在很多设备上支持还不够友好。</p>
<hr>
<h2>CSS3 多媒体查询</h2>
<p>CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。</p>

<p>媒体查询可用于检测很多事情，例如：</p>
<ul>
	<li>viewport(视窗) 的宽度与高度</li>
	<li>设备的宽度与高度</li>
	<li>朝向 (智能手机横屏，竖屏) 。</li>
	<li>分辨率</li>
</ul>
<p>目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。</p>
<hr>
<h2>浏览器支持</h2>
<p>表格中的数字表示支持该属性的第一个浏览器的版本号。</p>
<table class="browserref">
  <tbody><tr>
    <th style="width:25%;font-size:16px;text-align:left">属性</th>
    <th style="width:15%" class="bsChrome" title="Chrome"></th>
    <th style="width:15%" class="bsEdge" title="Internet Explorer / Edge"></th>
    <th style="width:15%" class="bsFirefox" title="Firefox"></th>
    <th style="width:15%" class="bsSafari" title="Safari"></th>
    <th style="width:15%" class="bsOpera" title="Opera"></th>                
  </tr>
  <tr>
    <td style="text-align:left">@media</td>
    <td>21.0</td>
    <td>9.0</td>
    <td>3.5</td>
    <td>4.0</td>
    <td>9.0</td>
  </tr>
</tbody></table>
<hr>
<h2>多媒体查询语法</h2>
<p>多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。</p>
<pre>
@media not|only mediatype and (expressions) {
    CSS-Code;
}
</pre>
<p>
如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。
</p>
<p>除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。</p>
<ul><li>
<p><b>not:</b> not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。</p>
</li><li>
<p><b>only:</b> 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。</p>
</li><li>
<p><b>all:</b> 所有设备，这个应该经常看到。</p>
</li>
</ul>


<p>你也可以在不同的媒体上使用不同的样式文件：</p>
<pre>

</pre>
<hr>
<h2>CSS3 多媒体类型</h2>
<table class="reference">
  <tbody><tr>
    <th style="width:25%">值</th>
    <th>描述</th>
  </tr>  
  <tr>
    <td>all</td>
    <td>用于所有多媒体类型设备</td>
  </tr>
  <tr>
    <td>print</td>
    <td>用于打印机</td>
  </tr>
    <tr>
    <td>screen</td>
    <td>用于电脑屏幕，平板，智能手机等。</td>
    </tr>
  <tr>
    <td>speech</td>
    <td>用于屏幕阅读器</td>
  </tr>
  </tbody></table>
<hr>

<h2>多媒体查询简单实例</h2>
<p>使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。</p>

<p>以下实例中在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色:</p>
<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	<span class="highELE">@media screen and (min-width: 480px) </span>{<br><span class="highELE">&nbsp;&nbsp;&nbsp; body </span>{<br>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<span class="highATT">background-color:</span><span class="highVAL"> lightgreen;</span><br>&nbsp;&nbsp;&nbsp; }<br>}<br>
</div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_media_queries1">尝试一下 »</a>
</div>

<p>以下实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧：</p>

<div class="example">
<h3 class="example">实例</h3>
<div class="example_code">
	<span class="highELE">@media screen and (min-width: 480px) </span>{<br><span class="highELE">&nbsp;&nbsp;&nbsp; #leftsidebar 
	</span>{<span class="highATT">width:</span><span class="highVAL"> 200px;</span> <span class="highATT">float:</span><span class="highVAL"> left;</span>}<br><span class="highELE">&nbsp;&nbsp;&nbsp; #main 
	</span>{<span class="highATT">margin-left:</span><span class="highVAL">216px;</span>}<br>}<br>
</div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_media_queries2">尝试一下 »</a>

</div>
<hr>
<h2>CSS3 @media 参考 </h2>

<p>更多多媒体查询内容可以参考
<a target="_blank" href="/cssref/css3-pr-mediaquery.html">@media</a>  规则。</p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-flexbox.html" rel="prev"> CSS3 弹性盒子</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/css3/css3-mediaqueries-ex.html" rel="next"> CSS3 多媒体查询实例</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">CSS3 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="CSS3 教程"  href="/css3/css3-tutorial.html" >
			CSS3 教程			</a>
						<a target="_top" title="CSS3 简介"  href="/css3/css3-intro.html" >
			CSS3 简介			</a>
						<a target="_top" title="CSS3 边框"  href="/css3/css3-borders.html" >
			CSS3 边框			</a>
			<a target="_top" title="CSS3  圆角" href="css3-border-radius.html"> CSS3 圆角 </a>			<a target="_top" title="CSS3 背景"  href="/css3/css3-backgrounds.html" >
			CSS3 背景			</a>
			<a target="_top" href="/css3/css3-gradients.html">
	CSS3 渐变	</a>			<a target="_top" title="CSS3 文本效果"  href="/css3/css3-text-effects.html" >
			CSS3 文本效果			</a>
						<a target="_top" title="CSS3 字体"  href="/css3/css3-fonts.html" >
			CSS3 字体			</a>
						<a target="_top" title="CSS3 2D 转换"  href="/css3/css3-2dtransforms.html" >
			CSS3 2D 转换			</a>
						<a target="_top" title="CSS3 3D 转换"  href="/css3/css3-3dtransforms.html" >
			CSS3 3D 转换			</a>
						<a target="_top" title="CSS3 过渡"  href="/css3/css3-transitions.html" >
			CSS3 过渡			</a>
						<a target="_top" title="CSS3 动画"  href="/css3/css3-animations.html" >
			CSS3 动画			</a>
						<a target="_top" title="CSS3 多列"  href="/css3/css3-multiple-columns.html" >
			CSS3 多列			</a>
						<a target="_top" title="CSS3 用户界面"  href="/css3/css3-user-interface.html" >
			CSS3 用户界面			</a>
						<a target="_top" title="CSS 图片"  href="/css3/css3-images.html" >
			CSS3 图片			</a>
						<a target="_top" title="CSS 按钮"  href="/css3/css3-buttons.html" >
			CSS3 按钮			</a>
						<a target="_top" title="CSS 分页实例"  href="/css3/css3-pagination.html" >
			CSS3 分页			</a>
						<a target="_top" title="CSS3 框大小"  href="/css3/css3-box-sizing.html" >
			CSS3 框大小			</a>
						<a target="_top" title="CSS3 弹性盒子"  href="/css3/css3-flexbox.html" >
			CSS3 弹性盒子			</a>
						<a target="_top" title="CSS3 多媒体查询"  href="/css3/css3-mediaqueries.html" >
			CSS3 多媒体查询			</a>
						<a target="_top" title="CSS3 多媒体查询实例"  href="/css3/css3-mediaqueries-ex.html" >
			CSS3 多媒体查询实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-mediaqueries.html" rel="prev"> CSS3 多媒体查询</a> </div>
			<div class="next-design-link"></div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>CSS3 多媒体查询实例</h1>

<p>本章节我们将为大家演示一些多媒体查询实例。</p>

<p>开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下：</p>
<div class="example">
<h3 class="example">实例 1</h3>
<div class="example_code">

	<span class="highLT">&lt;</span><span class="highELE">!DOCTYPE</span> <span class="highATT">html</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">html</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">head</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">style</span><span class="highGT">&gt;</span><br>ul {<br>&nbsp;&nbsp;&nbsp; 
	list-style-type: none;<br>}<br><br>ul li a {<br>&nbsp;&nbsp;&nbsp; color: 
	green;<br>&nbsp;&nbsp;&nbsp; text-decoration: none;<br>&nbsp;&nbsp;&nbsp; 
	padding: 3px; <br>&nbsp;&nbsp;&nbsp; display: block;<br>}<br><span class="highLT">&lt;</span><span class="highELE">/style</span><span class="highGT">&gt;</span><br>
	<span class="highLT">&lt;</span><span class="highELE">/head</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">body</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">ul</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">li</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">a</span> <span class="highATT">data-email=</span><span class="highVAL">"johndoe@example.com"</span> 
	<span class="highATT">href=</span><span class="highVAL">"mailto:johndoe@example.com"</span><span class="highGT">&gt;</span>John Doe<span class="highLT">&lt;</span><span class="highELE">/a</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/li</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">li</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">a</span> 
	<span class="highATT">data-email=</span><span class="highVAL">"marymoe@example.com"</span> <span class="highATT">href=</span><span class="highVAL">"mailto:marymoe@example.com"</span><span class="highGT">&gt;</span>Mary 
	Moe<span class="highLT">&lt;</span><span class="highELE">/a</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/li</span><span class="highGT">&gt;</span><br>&nbsp; <span class="highLT">&lt;</span><span class="highELE">li</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">a</span> <span class="highATT">data-email=</span><span class="highVAL">"amandapanda@example.com"</span> <span class="highATT">href=</span><span class="highVAL">"mailto:amandapanda@example.com"</span><span class="highGT">&gt;</span>Amanda 
	Panda<span class="highLT">&lt;</span><span class="highELE">/a</span><span class="highGT">&gt;</span><span class="highLT">&lt;</span><span class="highELE">/li</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/ul</span><span class="highGT">&gt;</span><br><br><span class="highLT">&lt;</span><span class="highELE">/body</span><span class="highGT">&gt;</span><br><span class="highLT">&lt;</span><span class="highELE">/html</span><span class="highGT">&gt;</span><br>
</div>
<br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_mediaqueries_ex1">尝试一下 »</a>
</div>
<p>注意  <code>data-email</code> 属性。在 HTML 中我们可以使用带 <code>data-</code> 前缀的属性来存储信息。
</p>
<hr>
<h2>520 到 699px 宽度 - 添加邮箱图标</h2>
<p>当浏览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标：</p>
<div class="example">
<h3 class="example">实例 2</h3>
<div class="example_code">
	<span class="highELE">@media screen and (max-width: 699px) and (min-width: 520px) </span>{<br><span class="highELE">&nbsp;&nbsp;&nbsp; 
	ul li a </span>{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	<span class="highATT">padding-left:</span><span class="highVAL"> 30px;</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	<span class="highATT">background:</span><span class="highVAL"> url(email-icon.png) left center no-repeat;</span><br>&nbsp;&nbsp;&nbsp; 
	}<br>}<br>
</div><br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_mediaqueries_ex2">尝试一下 »</a>

</div>



<hr>
<h2>700 到 1000px - 添加文本前缀信息</h2>


<p>当浏览器的宽度在 700 到 1000px, 会在邮箱链接前添加 "Email: ":</p>

<div class="example">
<h3 class="example">实例 3</h3>
<div class="example_code">
	<span class="highELE">@media screen and (max-width: 1000px) and (min-width: 700px) </span>{<br><span class="highELE">&nbsp;&nbsp;&nbsp; 
	ul li a:before </span>{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	<span class="highATT">content:</span><span class="highVAL"> "Email: ";</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	<span class="highATT">font-style:</span><span class="highVAL"> italic;</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="highATT">color:</span><span class="highVAL"> #666666;</span><br>&nbsp;&nbsp;&nbsp; 
	}<br>}<br>
</div><br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_mediaqueries_ex3">尝试一下 »</a>

</div>


<hr>
<h2>大于 1001px 宽度 - 添加邮件地址</h2>

<p>当浏览器的宽度大于 1001px 时，会在链接后添加邮件地址接。</p>
<p>我们会使用 <code>data-</code> 属性来为每个人名后添加邮件地址：</p>

<div class="example">
<h3 class="example">实例 4</h3>
<div class="example_code">
	<span class="highELE">@media screen and (min-width: 1001px) </span>{<br><span class="highELE">&nbsp;&nbsp;&nbsp; ul li 
	a:after </span>{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="highATT">content:</span><span class="highVAL"> " (" attr(data-email) 
	")";</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="highATT">font-size:</span><span class="highVAL"> 12px;</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	<span class="highATT">font-style:</span><span class="highVAL"> italic;</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="highATT">color:</span><span class="highVAL"> 
	#666666;</span><br>&nbsp;&nbsp;&nbsp; }<br>}<br>
</div><br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_mediaqueries_ex4">尝试一下 »</a>

</div>


<hr>
<h2>大于 1151px 宽度 - 添加图标</h2>
<p>当浏览器的宽度大于 1001px 时，会在人名前添加图标。</p>
<p>实例中，我们没有编写额外的查询块，我们可以在已有的查询媒体后使用逗号分隔来添加其他媒体查询 (类似 OR 操作符):</p>

<div class="example">
<h3 class="example">实例 5</h3>
<div class="example_code">
	<span class="highELE">@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 
	1151px) </span>{<br><span class="highELE">&nbsp;&nbsp;&nbsp; 
	ul li a </span>{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	<span class="highATT">padding-left:</span><span class="highVAL"> 30px;</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	<span class="highATT">background:</span><span class="highVAL"> url(email-icon.png) left center no-repeat;</span><br>&nbsp;&nbsp;&nbsp; 
	}<br>}<br>
</div><br>
	<a target="_blank" class="tryitbtn" href="/try/try.php?filename=trycss3_mediaqueries_ex5">尝试一下 »</a>

</div>

<hr>
<div class="tryit_ex">
<img src="/images/tryitimg.gif" style="height:46px;width:40px" alt="实例">
<h2>更多实例</h2>
</div>
<p><a href="/try/try.php?filename=trycss3_mediaqueries_ex6" target="_blank">在一个网页的侧栏上使用邮件列表链接</a><br>该实例在网页的左侧栏添加了邮件链接列表。</p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/css3/css3-mediaqueries.html" rel="prev"> CSS3 多媒体查询</a> </div>
			<div class="next-design-link"></div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
</html>